How can I set multiple CSS styles in JavaScript?

0 votes

I have the following JavaScript variables:

var fontsize = "12px"
var left= "200px"
var top= "100px"

I know that I can set them to my element iteratively like this:

document.getElementById("myElement").style.top=top
document.getElementById("myElement").style.left=left

Is it possible to set them all together at once, something like this?

document.getElementById("myElement").style = allMyStyle 
Oct 8 in Java-Script by kartik
• 35,800 points
30 views

1 answer to this question.

0 votes

Hello @kartik,

Using Object.assign:

Object.assign(yourelement.style,{fontsize:"12px",left:"200px",top:"100px"});

This also gives you ability to merge styles, instead of rewriting the CSS style.

You can also make a shortcut function:

const setStylesOnElement = function(styles, element){
    Object.assign(element.style, styles);
}

Hope it helps!!

Thank You!!

answered Oct 8 by Niroj
• 78,080 points

Related Questions In Java-Script

0 votes
1 answer

How can I get query string values in JavaScript?

Hello @kartik, You don't need jQuery for that ...READ MORE

answered Jul 27 in Java-Script by Niroj
• 78,080 points
76 views
0 votes
1 answer

How can I determine the type of an HTML element in JavaScript?

Hello @kartik, nodeName is the attribute you are looking ...READ MORE

answered Oct 8 in Java-Script by Niroj
• 78,080 points
78 views
+1 vote
1 answer

How can we send message multiple time to a specific person or group in whatsapp using loop?

Hii @kartik,  This is simple task to send single ...READ MORE

answered Feb 28 in Java-Script by Niroj
• 78,080 points
764 views
0 votes
1 answer

How can we access PHP variables in JavaScript or jQuery rather than <?php echo $variable ?>

Hello @kartik, You can also use json_encode for ...READ MORE

answered Apr 29 in Java-Script by Niroj
• 78,080 points
2,405 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18 in Laravel by Niroj
• 78,080 points
3,505 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18 in Laravel by Niroj
• 78,080 points
418 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23 in Laravel by Niroj
• 78,080 points
287 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23 in Laravel by Niroj
• 78,080 points
4,202 views
0 votes
2 answers

How can I set focus on an element in an HTML form using JavaScript?

Hi Kartik, try the following script <script>  (window.onload = ...READ MORE

answered Sep 24 in Java-Script by Okugbe
• 280 points
65 views
0 votes
2 answers

How can I set a session var using javascript and get it via php code?

Yes it is possible. You can either ...READ MORE

answered Aug 9 in Java-Script by Okugbe
• 280 points
3,106 views