I'm attempting to add this code to a dynamically created div element
style = "width:330px;float:left;"
The code in which creates the dynamic div
is
var nFilter = document.createElement('div');
nFilter.className = 'well';
nFilter.innerHTML = '<label>' + sSearchStr + '</label>';
My idea is to add the style after < div class="well"
but i don't know how i'd do it.
This question is related to
javascript
css
innerhtml
Try something like this
document.getElementById("vid-holder").style.width=300 + "px";
Using jQuery :
$(nFilter).attr("style","whatever");
Otherwise :
nFilter.setAttribute("style", "whatever");
should work
You can try with this
nFilter.style.cssText = 'width:330px;float:left;';
That should do it for you.
you should make a css class .my_style
then use .addClass('.mystyle')
A few people have an example using setAttribute which I like. However it assumes you don't have any styles currently set. I would maybe do something like:
nFilter.setAttribute('style', nFilter.getAttribute('style') + ';width:330px;float:left;');
Or make it into a helper function like this:
function setStyle(el, css){
el.setAttribute('style', el.getAttribute('style') + ';' + css);
}
setStyle(nFilter, 'width:330px;float:left;');
This makes sure that you can add styles to it continuously and it won't remove any style currently set by always appending to the current styles. It also adds an extra semi colon so that if there is a style ever missing one it will append another to make sure it is fully delimited.
var div = document.createElement('div');
div.setAttribute('style', 'width:330px; float:left');
div.setAttribute('class', 'well');
var label = document.createElement('label');
label.innerHTML = 'YOUR TEXT HERE';
div.appendChild(label);
You can do it directly on the style:
var nFilter = document.createElement('div');
nFilter.className = 'well';
nFilter.innerHTML = '<label>'+sSearchStr+'</label>';
// Css styling
nFilter.style.width = "330px";
nFilter.style.float = "left";
// or
nFilter.setAttribute("style", "width:330px;float:left;");
If you don't want to add each css property line by line, you can do something like this:
document.body.insertAdjacentHTML('afterbegin','<div id="div"></div>');_x000D_
_x000D_
/**_x000D_
* Add styles to DOM element_x000D_
* @element DOM element_x000D_
* @styles object with css styles_x000D_
*/_x000D_
function addStyles(element,styles){_x000D_
for(id in styles){_x000D_
element.style[id] = styles[id];_x000D_
}_x000D_
}_x000D_
_x000D_
// usage_x000D_
var nFilter = document.getElementById('div');_x000D_
var styles = {_x000D_
color: "red"_x000D_
,width: "100px"_x000D_
,height: "100px"_x000D_
,display: "block"_x000D_
,border: "1px solid blue"_x000D_
}_x000D_
addStyles(nFilter,styles);
_x000D_
Use cssText
nFilter.style.cssText +=';width:330px;float:left;';
Source: Stackoverflow.com