I've created the following...
var menu = document.createElement('select');
How would I now set CSS attributes e.g width: 100px?
Add a comment
|
11 Answers
Use element.style:
var element = document.createElement('select');
element.style.width = "100px";
3 Comments
Luke
What about for the unofficial ones like
-webkit-background-size? Is there a way to set these with plain js or do we have to use jQuery?
Daniel X Moore
@Luke obj.style["-webkit-background-size"] = "400px"
JAYD3V
This actually styles the element in the element and not in the stylesheet.
Just set the style:
var menu = document.createElement("select");
menu.style.width = "100px";
Or if you like, you can use jQuery:
$(menu).css("width", "100px");
3 Comments
djdd87
@Sime - My quotes aren't inconsistent. I always use double quotes for JS as that's the standard at work. Anyway, the first line had single quotes as I copied it from the OPs question. Corrected now anyway.
Šime Vidas
Well, they're OK now, but they were inconsistent at the time of my comment
:)djdd87
@Sime - I did acknoledge that: "Anyway, the first line had single quotes as I copied it from the OPs question. Corrected now anyway."
For most styles do this:
var obj = document.createElement('select');
obj.style.width= "100px";
For styles that have hyphens in the name do this instead:
var obj = document.createElement('select');
obj.style["-webkit-background-size"] = "100px"
Comments
Just for people who want to do the same thing in 2023
You can assign a CSS custom property to your element (through CSS or JS) and change it:
Assigment through CSS:
element {
--element-width: 300px;
width: var(--element-width, 100%);
}
Assignment through JS
ELEMENT.style.setProperty('--element-width', NEW_VALUE);
Get property value through JS
ELEMENT.style.getPropertyValue('--element-width');
Here useful links:
- https://developer.mozilla.org/en-US/docs/Web/CSS/--*
- https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue
- https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty
- https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/removeProperty
Comments
That's actually quite simple with vanilla JavaScript:
menu.style.width = "100px";
Comments
All of the answers tell you correctly how to do what you asked but I would advise using JavaScript to set a class on the element and style it by using CSS. That way you are keeping the correct separation between behaviour and style.
Imagine if you got a designer in to re-style the site... they should be able to work purely in CSS without having to work with your JavaScript.
In prototype I would do:
$(newElement).addClassName('blah')
When debugging, I like to be able to add a bunch of css attributes in one line:
menu.style.cssText = 'width: 100px';
Getting used to this style you can add a bunch of css in one line like so:
menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';
Comments
if you want to add a global property, you can use:
var styleEl = document.createElement('style'), styleSheet;
document.head.appendChild(styleEl);
styleSheet = styleEl.sheet;
styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
Comments
<h1>Silence and Smile</h1>
<input type="button" value="Show Red" onclick="document.getElementById('h1').style.color='Red'"/>
<input type="button" value="Show Green" onclick="document.getElementById('h1').style.color='Green'"/>
Comments
This works well with most CSS properties if there are no hyphens in them.
var element = document.createElement('select');
element.style.width = "100px";
For properties with hyphens in them like max-width, you should convert the sausage-case to camelCase
var element = document.createElement('select');
element.style.maxWidth = "100px";
1 Comment
user9645
"sausage-case" is nice but I like "kebab-case" better :)
<body>
<h1 id="h1">Silence and Smile</h1><br />
<h3 id="h3">Silence and Smile</h3>
<script type="text/javascript">
document.getElementById("h1").style.color = "Red";
document.getElementById("h1").style.background = "Green";
document.getElementById("h3").style.fontSize = "larger" ;
document.getElementById("h3").style.fontFamily = "Arial";
</script>
</body>
