setting a whole style string to an element from javascript (not individual style parameters)
How about the .style.cssText property? Here's Microsoft's explanation.
Throw it the styles you'd like to apply like so:
document.getElementById('myEl').style.cssText = 'float:left;margin-top:75px;';
As for browser support, although it was IE-proprietary I believe it's well-supported (works in the IEs, FF3, and Safari 3.2 WIN at least).
Set CSS Property by string with JavaScript
The "proper way" is using setProperty
or setPropertyValue
:
element.style.setProperty("background-color", "red");
element.style.setPropertyValue("background-color", "red");
They behave the same, the only difference is that setProperty
accepts an optional third argument to set !important
priority.
However, for convenience, the CSSStyleDeclaration
interface is extended by partial interfaces in order to allow to get or set the values of supported CSS properties using IDL camel-case attributes.
That means you can also use
element.style.backgroundColor = "red";
element.style["backgroundColor"] = "red";
Changing element style attribute dynamically using JavaScript
It's almost correct.
Since the -
is a javascript operator, you can't really have that in property names. If you were setting, border
or something single-worded like that instead, your code would work just fine.
However, the thing you need to remember for padding-top
, and for any hyphenated attribute name, is that in javascript, you remove the hyphen, and make the next letter uppercase, so in your case that'd be paddingTop
.
There are some other exceptions. JavaScript has some reserved words, so you can't set float
like that, for instance. Instead, in some browsers you need to use cssFloat
and in others styleFloat
. It is for discrepancies like this that it is recommended that you use a framework such as jQuery, that handles browser incompatibilities for you...
How to apply CSS string using Javascript/jQuery without parsing/tokenizing to retrieve property-value pairs?
You can retrieve the existing style
attribute and then set a new one:
var target = $("#target");
target.attr("style", target.attr("style") + "; " + yourString);
Live Example | Source
How to get an HTML element's style values in JavaScript?
The element.style
property lets you know only the CSS properties that were defined as inline in that element (programmatically, or defined in the style attribute of the element), you should get the computed style.
Is not so easy to do it in a cross-browser way, IE has its own way, through the element.currentStyle
property, and the DOM Level 2 standard way, implemented by other browsers is through the document.defaultView.getComputedStyle
method.
The two ways have differences, for example, the IE element.currentStyle
property expect that you access the CCS property names composed of two or more words in camelCase (e.g. maxHeight
, fontSize
, backgroundColor
, etc), the standard way expects the properties with the words separated with dashes (e.g. max-height
, font-size
, background-color
, etc).
Also, the IE element.currentStyle
will return all the sizes in the unit that they were specified, (e.g. 12pt, 50%, 5em), the standard way will compute the actual size in pixels always.
I made some time ago a cross-browser function that allows you to get the computed styles in a cross-browser way:
function getStyle(el, styleProp) {
var value, defaultView = (el.ownerDocument || document).defaultView;
// W3C standard way:
if (defaultView && defaultView.getComputedStyle) {
// sanitize property name to css notation
// (hypen separated words eg. font-Size)
styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
} else if (el.currentStyle) { // IE
// sanitize property name to camelCase
styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
return letter.toUpperCase();
});
value = el.currentStyle[styleProp];
// convert other units to pixels on IE
if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
return (function(value) {
var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = value || 0;
value = el.style.pixelLeft + "px";
el.style.left = oldLeft;
el.runtimeStyle.left = oldRsLeft;
return value;
})(value);
}
return value;
}
}
The above function is not perfect for some cases, for example for colors, the standard method will return colors in the rgb(...) notation, on IE they will return them as they were defined.
I'm currently working on an article in the subject, you can follow the changes I make to this function here.
Creating a p element and changing style in same function
You put the ID as "cursorText", instead of "para".
Also, I would personally recommend you create a CSS class, and set the class attribute on the new object to match that CSS class with all of the changes you want to make to the newly created paragraph.
Setting element styles with javascript in firefox
Use: parent.style.paddingRight = '100px';
jsFiddle example
Or parent.setAttribute('style', 'padding-right:100px;');
jsFiddle example
Related Topics
Encoding Utf-8 When Exporting HTML Table to Excel
Bootstrap 3: How to Make Head of Dropdown Link Clickable in Navbar
Get All CSS Root Variables in Array Using JavaScript and Change the Values
Does Display:None Keep Elements from Loading
Style a D3 Element with Jquery and CSS
How to Position a React Component Relative to Its Parent
How to Disable JavaScript for Responsive Design
Resize Bar for Sidenav in Angular Material Design
Show One Bootstrap Carousel Item in Mobile
Redirect Automatically When Selecting an Item from a Select Drop-Down List
How to Detect When a New Element Has Been Added to the Document in Jquery
Include CSS and JavaScript in My Django Template
How to Disable JavaScript/CSS Minification in ASP.NET MVC 4 Beta
How to Style a Unicode Character
Getting the Height of an Option Element with JavaScript
How to Make the Facebook Like Button's Width Automatically Resize