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.
Is there a way to toggle a single CSS property using the animate() function without hiding it?
Something like this;
$(".block").animate({ 'border-width': 'toggle' }, 1000);
I cannot use the toggleClass(), addClass() or removeClass(). The reason for this is that it has an unwanted effect on the size of the element that is animated (see JSFiddle).
You can find a JSFiddle here.
What I can think of is this;
if(parseInt($(".block").css('border-width'))) {
$(".block").animate({ 'border-width': '0'});
}
else {
$(".block").animate({ 'border-width': '100px'});
}
..Or something like this by adding a class to the element. But I would prefer not to use an if statement. I wonder if this is possible in a single line of code. Feels like it should be.
try using this, in your css:
.block1,
.block2 {
display: inline-block;
vertical-align: top;
color: white;
height: 100%;
width: 50%;
transition: all, 1s;
}
.no-border-top {
border-top-width: 0;
}
then simply toggle no-border-top class, you can see it here
You can use variables to define toggle effect:
var currentBorderW = 0;
$('.block1').on('click', function(){
var nextBorderW = parseInt($(this).css('border-width'));
$(this).animate({ 'border-width': currentBorderW + 'px' }, 1000);
currentBorderW = nextBorderW;
});
Here is working jsFiddle.
Does this do what you want?
$('.block1').on('click', function(){
$(this).animate({ 'border-width': '-=100px' }, 1000);
});
$('.block2').on('click', function(){
$(this).children().first().show();
$(this).toggleClass('borderTop', 1000);
});
JS Fiddle for this code sample
Everything else is the same: your CSS, HTML, etc. I only changed the property border-width to have a value of -= 100px.
I used the -= operator, per the jQuery API docs:
Animated properties can also be relative. If a value is supplied with a leading += or -= sequence of characters, then the target value is computed by adding or subtracting the given number from the current value of the property.
EDIT: To make it slide back in again, see this example on JSFiddle
(function(){
var clickCount=0;
$('.block1').click(function(){
if (clickCount%2==0) {
$(this).animate({ 'border-width': '-=100px' }, 1000);
}
else {
$(this).animate({ 'border-width': '+=100px' }, 1000);
}
clickCount++;
});
})();
$('.block2').on('click', function(){
$(this).children().first().show();
$(this).toggleClass('borderTop', 1000);
});
This is the first time I visited stack overflow and I saw a beautiful header message which displays a text and a close button.
The header bar is fixed one and is great to get the attention of the visitor. I was wondering if anyone of you guys know the code to get the same kind of header bar.
Quick pure JavaScript implementation:
function MessageBar() {
// CSS styling:
var css = function(el,s) {
for (var i in s) {
el.style[i] = s[i];
}
return el;
},
// Create the element:
bar = css(document.createElement('div'), {
top: 0,
left: 0,
position: 'fixed',
background: 'orange',
width: '100%',
padding: '10px',
textAlign: 'center'
});
// Inject it:
document.body.appendChild(bar);
// Provide a way to set the message:
this.setMessage = function(message) {
// Clear contents:
while(bar.firstChild) {
bar.removeChild(bar.firstChild);
}
// Append new message:
bar.appendChild(document.createTextNode(message));
};
// Provide a way to toggle visibility:
this.toggleVisibility = function() {
bar.style.display = bar.style.display === 'none' ? 'block' : 'none';
};
}
How to use it:
var myMessageBar = new MessageBar();
myMessageBar.setMessage('hello');
// Toggling visibility is simple:
myMessageBar.toggleVisibility();
Update:
Check out the DEMO
Code Used:
$(function(){
$('#smsg_link').click(function(){
showMessage('#9BED87', 'black', 'This is sample success message');
return false;
});
$('#imsg_link').click(function(){
showMessage('#FFE16B', 'black', 'This is sample info message');
return false;
});
$('#emsg_link').click(function(){
showMessage('#ED869B', 'black', 'This is sample error message');
return false;
});
});
/*
showMessage function by Sarfraz:
-------------------------
Shows fancy message on top of the window
params:
- bgcolor: The background color for the message box
- color: The text color of the message box
- msg: The message text
*/
var interval = null;
function showMessage(bgcolor, color, msg)
{
$('#smsg').remove();
clearInterval(interval);
if (!$('#smsg').is(':visible'))
{
if (!$('#smsg').length)
{
$('<div id="smsg">'+msg+'</div>').appendTo($('body')).css({
position:'fixed',
top:0,
left:0,
width:'98%',
height:'30px',
lineHeight:'30px',
background:bgcolor,
color:color,
zIndex:1000,
padding:'10px',
fontWeight:'bold',
fontSize:'18px',
textAlign:'center',
opacity:0.8,
margin:'auto',
display:'none'
}).slideDown('show');
interval = setTimeout(function(){
$('#smsg').animate({'width':'hide'}, function(){
$('#smsg').remove();
});
}, 3000);
}
}
}
If you want to create your own, check out the slideToggle function of jQuery.
The relevant css would include:
position: fixed;
top: 0;
width: 100%;
More information about position:fixed:
An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)
If IE6 support is important to you, you may wish to research workarounds.
Here is an alternative method using jQuery which would also slide up/down on show/hide.
Add the following HTML right after the <body> tag in your page:
<div id="msgBox">
<span id="msgText">My Message</span>
<a id="msgCloseButton" href='#'>close</a>
</div>
Add this CSS to your stylesheet
#msgBox {
padding:10px;
background-color:Orange;
text-align:center;
display:none;
font:bold 1.4em Verdana;
}
#msgCloseButton{
float:right;
}
And finally here is the javascript to setup the close button and functions to show and hide the message bar:
/* Document Ready */
$(function () {
SetupNotifications();
});
SetupNotifications = function () {
//setup close button in msgBox
$("#msgCloseButton").click(function (e) {
e.preventDefault();
CloseMsg();
});
}
DisplayMsg = function (sMsg) {
//set the message text
$("#msgText").text(sMsg);
//show the message
$('#msgBox').slideDown();
}
CloseMsg = function () {
//hide the message
$('#msgBox').slideUp();
//clear msg text
$("#msgtText").val("");
}
To perform a simple test you could try this:
Show Message!
Something like this?
$("#bar").slideUp();
However, here I think they fade out first the bar then they bring the main container up, so that'd be something like that:
$("#bar").fadeOut(function(){
$("#container").animate({"top":"0px"});
});
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);