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, 2020 in Java-Script by kartik
• 37,520 points
3,695 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, 2020 by Niroj
• 82,840 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, 2020 in Java-Script by Niroj
• 82,840 points
1,408 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, 2020 in Java-Script by Niroj
• 82,840 points
2,400 views
0 votes
0 answers

How can I create a two dimensional array in JavaScript?

Is it possible to create a two-dimensional ...READ MORE

May 9, 2022 in Java-Script by Kichu
• 19,040 points
764 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, 2020 in Java-Script by Niroj
• 82,840 points
18,741 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, 2020 in Laravel by Niroj
• 82,840 points
23,080 views
0 votes
1 answer

What is redirection in Laravel?

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

answered Mar 18, 2020 in Laravel by Niroj
• 82,840 points
3,016 views
0 votes
1 answer

How to install Laravel via composer?

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

answered Mar 23, 2020 in Laravel by Niroj
• 82,840 points
2,948 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, 2020 in Laravel by Niroj
• 82,840 points
44,887 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, 2020 in Java-Script by Okugbe
• 280 points
1,865 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, 2020 in Java-Script by Okugbe
• 280 points
28,872 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP