I know we can use .style to apply css to DOM element like this:
document.getElementById("test").style.color="red";
I am wondering, if it is possible to apply a style object, something like this:
newStyle: {
position : 'fixed';
width : '300px';
height : '20px';
top : '0';
}
how to apply newStyle by using .style, is it possible? ( We are not using jQuery here)
You can use Object.assign:
Object.assign(myElement.style, {
width: '300px',
height: '20px'
});
Object.assign(document.getElementById("test").style, {
position: 'fixed',
width: '300px',
height: '100px',
top: '0'
});
<div id="test" style="background: green"></div>
you can loop through properties of styles as -
var newStyle = {
position : 'fixed',
width : '300px',
height : '20px',
top : '0'
};
for (i in newStyle)
document.getElementById("test").style[i] = newStyle[i];
Applying rule by rule is bad. It makes the browser re-render multiple times. You can apply all the changes in one shot - by using cssText
So, in your case, you need to convert the object into a string and then apply all the styles in one shot:
var newStyle = {
position: 'fixed',
width: '300px',
height: '20px',
top: '0'
}
var styles = [];
for(var rule in newStyle) styles.push(rule+': '+newStyle[rule]);
document.getElementById("test").style.cssText = styles.join(';');
Try this:
var mystyle = {
color: 'red'
};
for (var property in mystyle) {
if (mystyle.hasOwnProperty(property)) {
document.getElementById("updateStyle").style[property] = mystyle[property];
}
}
<p id="updateStyle">Hi This is demo text.</p>
replace updateStylewith your own id
You can extend the prototype of the "HTMLElement". Add a method to loop through a object containing the style information. You can do it like this:
HTMLElement.prototype.applyStyleObject = function (styleObject) {
for (var item in this.style) {
var objProp = styleObject[item];
if (objProp !== undefined) {
this.style[item] = objProp;
}
}
}
I've done a first prototype as an example how to use this in the wild :):
//The object containing the style elements
var obj = {
width: "200px",
height: "100px"
}
var spanobj = {
color: "red"
}
//Cached the div node
var divNode = document.getElementById("div");
//Extend the HTMLElement prototype
HTMLElement.prototype.applyStyleObject = function (styleObject) {
for (var item in this.style) {
var objProp = styleObject[item];
if (objProp !== undefined) {
this.style[item] = objProp;
}
}
}
//Execute the new method
divNode.applyStyleObject(obj);
document.getElementById("span").applyStyleObject(spanobj);
document.getElementsByTagName("figure")[0].applyStyleObject(obj);
div {
border: solid 1px black;
}
figure {
border: solid 1px black;
}
<div id="div"></div>
<span id="span">This is a span tag</span>
<figure></figure>
If you've extended the prototype of an javascript object, it applies to all newly created instances of that kind of object.
I have a number of divs positioned absolutely on a background image.
On the page will also be some buttons. When those are clicked different variables will trigger, shrinking and growing these divs.
Here is the javascript I'm currently using...
$(document).ready(function() {
var title = 1;
$(".button1").click(function() {
title = 1;
});
$(".button2").click(function() {
title = 2;
});
$(document).click(function(e) {
console.log(title);
if (title==1){
$('.london').animate({ backgroundColor:'green', width:'50', height:'50' }, 300);
} else if (title==2){
$('.london').animate({ backgroundColor:'red', width:'40', height:'40' }, 300);
}
});
});
As they are absolutely positioned they are scaled from the corner they are positioned with.
see an example here.
What I need to do is shrink and grow these divs from their center point. The only solutions I've seen seem overly complicated.
I guess I could add a negative margin of half the divs width in the jQuery to counteract this? I'll try that if there are no better solutions
Thanks for any help.
bboybeatle, your "negative margin of half the divs width" idea is spot on, and not at all difficult to implement. Just include the required marginTop and marginLeft settings in the two animations.
$(function() {
var cssMap1a = {
backgroundColor: 'green'
};
var cssMap1b = {
width: 50,
height: 50,
marginTop: -10,
marginLeft: -10
};
var cssMap2a = {
backgroundColor: 'red'
};
var cssMap2b = {
width: 30,
height: 30,
marginTop: 0,
marginLeft: 0
};
$(".button1").click(function () {
$('.london').css(cssMap1a).animate(cssMap1b, 300);
});
$(".button2").click(function () {
$('.london').css(cssMap2a).animate(cssMap2b, 300);
});
});
And here's a fiddle. Fiddles are not difficult to set up. Hopefully this will help you next time you need to ask a question here.
As you will see :
"London" and the buttons are moved to a better position for demo purposes
The colour changes are separated out as separate css maps. They didn't work in the fiddle when included in the animation maps. jQuery needs a plugin to animate colours.
Thanks very much for that #Roamer-1888, I actually used some variables to make it slightly easier to apply the margin. I will remember that technique of putting multiple css properties in a variable..
Heres a snippet of my code I ended up using...
londonMargin = london/2 - london;
$('.london').animate({ width:london, height:london, marginLeft:londonMargin, marginBottom:londonMargin }, 300);
Just for fun I put together a little FIDDLE that has a function to which you pass an element name, the x and y coordinates of the center, and it will position the element in the larger element.
JS
var myelement = $('.boxdiv');
var myelement2 = $('.boxdiv2');
putmycenter( myelement, 90, 90 );
putmycenter( myelement2, 160, 280 );
function putmycenter (element, x, y)
{
var boxdivxcentre = element.width()/2;
var boxdivycentre = element.height()/2;
var boxdivposx = (x - boxdivxcentre);
var boxdivposy = (y - boxdivycentre);
element.css({
"top" : boxdivposy + 'px',
"left" : boxdivposx + 'px'
});
}
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
If you have the CSS values as string and there is no other CSS already set for the element (or you don't care about overwriting), make use of the cssText property:
document.getElementById("myElement").style.cssText = "display: block; position: absolute";
You can also use template literals for an easier, more readable multiline CSS-like syntax:
document.getElementById("myElement").style.cssText = `
display: block;
position: absolute;
`;
This is good in a sense as it avoids repainting the element every time you change a property (you change them all "at once" somehow).
On the other side, you would have to build the string first.
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);
}
#Mircea: It is very much easy to set the multiple styles for an element in a single statement.
It doesn't effect the existing properties and avoids the complexity of going for loops or plugins.
document.getElementById("demo").setAttribute(
"style", "font-size: 100px; font-style: italic; color:#ff0000;");
BE CAREFUL: If, later on, you use this method to add or alter style properties, the previous properties set using 'setAttribute' will be erased.
Make a function to take care of it, and pass it parameters with the styles you want changed..
function setStyle( objId, propertyObject )
{
var elem = document.getElementById(objId);
for (var property in propertyObject)
elem.style[property] = propertyObject[property];
}
and call it like this
setStyle('myElement', {'fontsize':'12px', 'left':'200px'});
for the values of the properties inside the propertyObject you can use variables..
I just stumbled in here and I don't see why there is so much code required to achieve this.
Add your CSS code using String Interpolation.
let styles = `
font-size:15em;
color:red;
transform:rotate(20deg)`
document.querySelector('*').style = styles
a
A JavaScript library allows you to do these things very easily
jQuery
$('#myElement').css({
font-size: '12px',
left: '200px',
top: '100px'
});
Object and a for-in-loop
Or, a much more elegant method is a basic object & for-loop
var el = document.getElementById('#myElement'),
css = {
font-size: '12px',
left: '200px',
top: '100px'
};
for(i in css){
el.style[i] = css[i];
}
set multiple css style properties in Javascript
document.getElementById("yourElement").style.cssText = cssString;
or
document.getElementById("yourElement").setAttribute("style",cssString);
Example:
document
.getElementById("demo")
.style
.cssText = "margin-left:100px;background-color:red";
document
.getElementById("demo")
.setAttribute("style","margin-left:100px; background-color:red");
Strongly typed in typescript:
The object.assign method is great, but with typescript you can get autocomplete like this:
const newStyle: Partial<CSSStyleDeclaration> =
{
placeSelf: 'centered centered',
margin: '2em',
border: '2px solid hotpink'
};
Object.assign(element.style, newStyle);
Note the property names are camelCase not with dashes.
This will even tell you when they're deprecated.
You can have individual classes in your css files and then assign the classname to your element
or you can loop through properties of styles as -
var css = { "font-size": "12px", "left": "200px", "top": "100px" };
for(var prop in css) {
document.getElementById("myId").style[prop] = css[prop];
}
Simplest way for me was just using a string/template litteral:
elementName.style.cssText = `
width:80%;
margin: 2vh auto;
background-color: rgba(5,5,5,0.9);
box-shadow: 15px 15px 200px black; `;
Great option cause you can use multiple line strings making life easy.
Check out string/template litterals here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
Using plain Javascript, you can't set all the styles at once; you need to use single lines for each of them.
However, you don't have to repeat the document.getElementById(...).style. code over and over; create an object variable to reference it, and you'll make your code much more readable:
var obj=document.getElementById("myElement").style;
obj.top=top;
obj.left=left;
...etc. Much easier to read than your example (and frankly, just as easy to read as the jQuery alternative).
(if Javascript had been designed properly, you could also have used the with keyword, but that's best left alone, as it can cause some nasty namespace issues)
Since strings support adding, you can easily add your new style without overriding the current:
document.getElementById("myElement").style.cssText += `
font-size: 12px;
left: 200px;
top: 100px;
`;
Don't think it is possible as such.
But you could create an object out of the style definitions and just loop through them.
var allMyStyle = {
fontsize: '12px',
left: '200px',
top: '100px'
};
for (i in allMyStyle)
document.getElementById("myElement").style[i] = allMyStyle[i];
To develop further, make a function for it:
function setStyles(element, styles) {
for (i in styles)
element.style[i] = styles[i];
}
setStyles(document.getElementById("myElement"), allMyStyle);
Your best bet may be to create a function that sets styles on your own:
var setStyle = function(p_elem, p_styles)
{
var s;
for (s in p_styles)
{
p_elem.style[s] = p_styles[s];
}
}
setStyle(myDiv, {'color': '#F00', 'backgroundColor': '#000'});
setStyle(myDiv, {'color': mycolorvar, 'backgroundColor': mybgvar});
Note that you will still have to use the javascript-compatible property names (hence backgroundColor)
See for .. in
Example:
var myStyle = {};
myStyle.fontsize = "12px";
myStyle.left= "200px";
myStyle.top= "100px";
var elem = document.getElementById("myElement");
var elemStyle = elem.style;
for(var prop in myStyle) {
elemStyle[prop] = myStyle[prop];
}
This is old thread, so I figured for anyone looking for a modern answer, I would suggest using Object.keys();
var myDiv = document.getElementById("myDiv");
var css = {
"font-size": "14px",
"color": "#447",
"font-family": "Arial",
"text-decoration": "underline"
};
function applyInlineStyles(obj) {
var result = "";
Object.keys(obj).forEach(function (prop) {
result += prop + ": " + obj[prop] + "; ";
});
return result;
}
myDiv.style = applyInlineStyles(css);
Use CSSStyleDeclaration.setProperty() method inside the Object.entries of styles object.
We can also set the priority ("important") for CSS property with this.
We will use "hypen-case" CSS property names.
const styles = {
"font-size": "18px",
"font-weight": "bold",
"background-color": "lightgrey",
color: "red",
"padding": "10px !important",
margin: "20px",
width: "100px !important",
border: "1px solid blue"
};
const elem = document.getElementById("my_div");
Object.entries(styles).forEach(([prop, val]) => {
const [value, pri = ""] = val.split("!");
elem.style.setProperty(prop, value, pri);
});
<div id="my_div"> Hello </div>
There are scenarios where using CSS alongside javascript might make more sense with such a problem. Take a look at the following code:
document.getElementById("myElement").classList.add("newStyle");
document.getElementById("myElement").classList.remove("newStyle");
This simply switches between CSS classes and solves so many problems related with overriding styles. It even makes your code more tidy.
I think is this a very simple way with regards to all solutions above:
const elm = document.getElementById("myElement")
const allMyStyle = [
{ prop: "position", value: "fixed" },
{ prop: "boxSizing", value: "border-box" },
{ prop: "opacity", value: 0.9 },
{ prop: "zIndex", value: 1000 },
];
allMyStyle.forEach(({ prop, value }) => {
elm.style[prop] = value;
});
This is an old question but I thought it might be worthwhile to use a function for anyone not wanting to overwrite previously declared styles. The function below still uses Object.assign to properly fix in the styles. Here is what I did
function cssFormat(cssText){
let cssObj = cssText.split(";");
let css = {};
cssObj.forEach( style => {
prop = style.split(":");
if(prop.length == 2){
css[prop[0]].trim() = prop[1].trim();
}
})
return css;
}
Now you can do something like
let mycssText = "background-color:red; color:white;";
let element = document.querySelector("body");
Object.assign(element.style, cssFormat(mycssText));
You can make this easier by supplying both the element selector and text into the function and then you won't have to use Object.assign every time. For example
function cssFormat(selector, cssText){
let cssObj = cssText.split(";");
let css = {};
cssObj.forEach( style => {
prop = style.split(":");
if(prop.length == 2){
css[prop[0]].trim() = prop[1].trim();
}
})
element = document.querySelector(selector);
Object.assign(element.style, css); // css, from previous code
}
Now you can do:
cssFormat('body', 'background-color: red; color:white;') ;
//or same as above (another sample)
cssFormat('body', 'backgroundColor: red; color:white;') ;
Note: Make sure your document or target element (for example, body) is already loaded before selecting it.
You can write a function that will set declarations individually in order not to overwrite any existing declarations that you don't supply. Let's say you have this object parameter list of declarations:
const myStyles = {
'background-color': 'magenta',
'border': '10px dotted cyan',
'border-radius': '5px',
'box-sizing': 'border-box',
'color': 'yellow',
'display': 'inline-block',
'font-family': 'monospace',
'font-size': '20px',
'margin': '1em',
'padding': '1em'
};
You might write a function that looks like this:
function applyStyles (el, styles) {
for (const prop in styles) {
el.style.setProperty(prop, styles[prop]);
}
};
which takes an element and an object property list of style declarations to apply to that object. Here's a usage example:
const p = document.createElement('p');
p.textContent = 'This is a paragraph.';
document.body.appendChild(p);
applyStyles(p, myStyles);
applyStyles(document.body, {'background-color': 'grey'});
// styles to apply
const myStyles = {
'background-color': 'magenta',
'border': '10px dotted cyan',
'border-radius': '5px',
'box-sizing': 'border-box',
'color': 'yellow',
'display': 'inline-block',
'font-family': 'monospace',
'font-size': '20px',
'margin': '1em',
'padding': '1em'
};
function applyStyles (el, styles) {
for (const prop in styles) {
el.style.setProperty(prop, styles[prop]);
}
};
// create example paragraph and append it to the page body
const p = document.createElement('p');
p.textContent = 'This is a paragraph.';
document.body.appendChild(p);
// when the paragraph is clicked, call the function, providing the
// paragraph and myStyles object as arguments
p.onclick = (ev) => {
applyStyles(p, myStyles);
}
// this time, target the page body and supply an object literal
applyStyles(document.body, {'background-color': 'grey'});
With ES6+ you can use also backticks and even copy the css directly from somewhere:
const $div = document.createElement('div')
$div.innerText = 'HELLO'
$div.style.cssText = `
background-color: rgb(26, 188, 156);
width: 100px;
height: 30px;
border-radius: 7px;
text-align: center;
padding-top: 10px;
font-weight: bold;
`
document.body.append($div)
Please consider the use of CSS for adding style class and then add this class by JavaScript
classList & simply add() function.
style.css
.nice-style {
fontsize : 12px;
left: 200px;
top: 100px;
}
script JavaScript
const addStyle = document.getElementById("myElement");
addStyle.classList.add('nice-style');
<button onclick="hello()">Click!</button>
<p id="demo" style="background: black; color: aliceblue;">
hello!!!
</p>
<script>
function hello()
{
(document.getElementById("demo").style.cssText =
"font-size: 40px; background: #f00; text-align: center;")
}
</script>
We can add styles function to Node prototype:
Node.prototype.styles=function(obj){ for (var k in obj) this.style[k] = obj[k];}
Then, simply call styles method on any Node:
elem.styles({display:'block', zIndex:10, transitionDuration:'1s', left:0});
It will preserve any other existing styles and overwrite values present in the object parameter.
Is the below innerHtml valid
var styleElement = win.document.createElement("STYLE");
styleElement.innerHTML = "#notEditableVatDisplay {display:inline-flex} #editableVatInput,.print-section,i.fa.fa-sort.click-sortable{display : none !important}";
Different ways to achieve this:
1. document.getElementById("ID").style.cssText = "display:block; position:relative; font-size:50px";
2. var styles = {"display":"block"; "position":"relative"; "font-size":"50px"};
var obj = document.getElementById("ID");
Object.assign(obj.style, styles);
3. var obj = document.getElementById("ID");
obj.setAttribute("style", "display:block; position:relative; font-size:50px");
Hope this helps ~ RDaksh
var styles = {
"background-color": "lightgray",
"width": "500px",
"height": "300px"
};
/
var obj = document.getElementById("container");
Object.assign(obj.style, styles);