Multiple Style Attributes in Javascript

Question

I have to apply multiple styles for a element, currently I have

document.getElementById("element1").style.top="1px";
document.getElementById("element1").style.marginLeft="0px";
|
|
|
document.getElementById("element1").style.left="10px";

How Can I do it in single line ? like

document.getElementById("element1").style={"top":"1px","left":"0px"};

I want to use plain Javascript not Jquery. Is it possible ?

nils · Answer 1 · 2014-03-04T21:20:50.313

2

document.getElementById("element1").style.cssText = "top: 1px; left: 0px;";

This should work but it would overwrite all existing inline defined styles.

Hope this helps.

edited Mar 04 '14 at 21:20

answered Mar 04 '14 at 21:11

nils

1,668
14
15

score 2 · Answer 2 · answered Mar 04 '14 at 21:36

2

To avoid overwriting your current classes you could do something like the following

document.getElementById("element1").style.cssText += "top: 1px; left: 0px;";

answered Mar 04 '14 at 21:36

mcabrams

686
1
6
23

score -1 · Answer 3 · answered Mar 04 '14 at 21:07

-1

use JQuery library
use css classes

Example:

<style>

.someClass {
   top: 1px;
   left: 0px;
}

</style>

<script>

$(document).ready(function(){

  $("#mydiv").addClass("someClass");

  $("#mydiv").removeClass("someClass");

});

</script>

<html>
<body>
<div id="mydiv"></div>
</body>
</html>

Good luck!

answered Mar 04 '14 at 21:07

TchiYuan

4,258
5
28
35

From the question: `I want to use plain Javascript not Jquery` – Colin DeClue Mar 04 '14 at 21:52
Yes, sorry. Read too fast. Try this: http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript – TchiYuan Mar 04 '14 at 22:05

Multiple Style Attributes in Javascript

3 Answers3