blocks|key|164433|text|nFilter.style.width+=+'330px';
nFilter.style.float+=+'left';|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|164434|这应该会给元素添加一个内联样式。|unstyled|164435|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>nFilter.style.width = '330px';
nFilter.style.float = 'left';
</code></pre>
This should add an inline style to the element.

blocks|key|164514|text|您可以直接在样式上执行此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|164515|var+nFilter+=+document.createElement('div');
nFilter.className+=+'well';
nFilter.innerHTML+=+'<label>'%2BsSearchStr%2B'</label>';

//+Css+styling
nFilter.style.width+=+"330px";
nFilter.style.float+=+"left";

//+or
nFilter.setAttribute("style",+"width:330px;float:left;");|code-block|syntax|javascript|164516|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can do it directly on the style:

<pre><code>var nFilter = document.createElement('div');
nFilter.className = 'well';
nFilter.innerHTML = '&lt;label&gt;'+sSearchStr+'&lt;/label&gt;';

// Css styling
nFilter.style.width = "330px";
nFilter.style.float = "left";

// or
nFilter.setAttribute("style", "width:330px;float:left;");
</code></pre>

blocks|key|382336|text|使用jQuery：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|382337|$(nFilter).attr("style","whatever");|code-block|syntax|javascript|382338|否则：|382339|nFilter.setAttribute("style",+"whatever");|382340|应该行得通|382341|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Using jQuery :

<pre><code>$(nFilter).attr("style","whatever");
</code></pre>

Otherwise :

<pre><code>nFilter.setAttribute("style", "whatever");
</code></pre>

should work

blocks|key|382426|text|你可以试试这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|382427|nFilter.style.cssText+=+'width:330px;float:left;';|code-block|syntax|javascript|382428|这对你来说应该足够了。|382429|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can try with this

<pre><code>nFilter.style.cssText = 'width:330px;float:left;';
</code></pre>

That should do it for you.

blocks|key|164534|text|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);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|164535|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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);
</code></pre>

blocks|key|382528|text|一些人有一个使用setAttribute的例子，我很喜欢。但是，它假定您当前没有设置任何样式。我可能会这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|382529|nFilter.setAttribute('style',+nFilter.getAttribute('style')+%2B+';width:330px;float:left;');|code-block|syntax|javascript|382530|或者使其成为一个辅助函数，如下所示：|382531|function+setStyle(el,+css){
++el.setAttribute('style',+el.getAttribute('style')+%2B+';'+%2B+css);
}

setStyle(nFilter,+'width:330px;float:left;');|382532|这确保您可以不断地向其添加样式，并且不会通过始终附加到当前样式来删除当前设置的任何样式。它还添加了一个额外的分号，因此如果有一个样式丢失了一个，它会追加另一个样式，以确保它是完全分隔的。|382533|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

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:

<pre><code>nFilter.setAttribute('style', nFilter.getAttribute('style') + ';width:330px;float:left;');
</code></pre>

Or make it into a helper function like this:

<pre><code>function setStyle(el, css){
 el.setAttribute('style', el.getAttribute('style') + ';' + css);
}

setStyle(nFilter, 'width:330px;float:left;');
</code></pre>

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.

blocks|key|382312|text|您应该在使用.addClass('.mystyle')之前创建一个css类.my_style|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|382313|entityMap^0|6|L|11|9|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

you should make a css class <code>.my_style</code> then use <code>.addClass('.mystyle')</code>

blocks|key|164607|text|如果您不想逐行添加每个css属性，您可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|164608|​|164609|document.body.insertAdjacentHTML('afterbegin','<div+id="div"></div>');

/**
+*+Add+styles+to+DOM+element
+*+@element+DOM+element
+*+@styles+object+with+css+styles
+*/
function+addStyles(element,styles){
++for(id+in+styles){
++++element.style[id]+=+styles[id];
++}
}

//+usage
var+nFilter+=+document.getElementById('div');
var+styles+=+{
++color:+"red"
++,width:+"100px"
++,height:+"100px"
++,display:+"block"
++,border:+"1px+solid+blue"
}
addStyles(nFilter,styles);|code-block|syntax|javascript|164610|164611|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

If you don't want to add each css property line by line, you can do something like this:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.body.insertAdjacentHTML('afterbegin','&lt;div id="div"&gt;&lt;/div&gt;');

/**
 * Add styles to DOM element
 * @element DOM element
 * @styles object with css styles
 */
function addStyles(element,styles){
 for(id in styles){
 element.style[id] = styles[id];
 }
}

// usage
var nFilter = document.getElementById('div');
var styles = {
 color: "red"
 ,width: "100px"
 ,height: "100px"
 ,display: "block"
 ,border: "1px solid blue"
}
addStyles(nFilter,styles);</code></pre>
</div>
</div>

blocks|key|382385|text|使用cssText|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|382386|nFilter.style.cssText+%2B=';width:330px;float:left;';|code-block|syntax|javascript|382387|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/DOM/CSSStyleDeclaration^0|2|7|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Use <a href="https://developer.mozilla.org/en-US/docs/DOM/CSSStyleDeclaration" rel="nofollow">cssText</a>

<pre><code>nFilter.style.cssText +=';width:330px;float:left;';
</code></pre>

blocks|key|164576|text|试试这样的东西|type|unstyled|depth|inlineStyleRanges|entityRanges|data|164577|document.getElementById("vid-holder").style.width=300+%2B+"px";|code-block|syntax|javascript|164578|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try something like this

<pre><code>document.getElementById("vid-holder").style.width=300 + "px";
</code></pre>

I'm attempting to add this code to a dynamically created div element

<pre><code>style = "width:330px;float:left;" 
</code></pre>

The code in which creates the dynamic <code>div</code> is 

<pre><code>var nFilter = document.createElement('div');
nFilter.className = 'well';
nFilter.innerHTML = '&lt;label&gt;' + sSearchStr + '&lt;/label&gt;';
</code></pre>

My idea is to add the style after <code>&lt; div class="well"</code> but i don't know how i'd do it.

Add inline style using Javascript

jQuery

我尝试将此代码添加到动态创建的div元素中style = "width:330px;float:left;" 创建动态div的代码是var nFilter = document.createElement('div');nFilter.className = 'well';nFilter.innerHTML = '<label>' + sSearchStr + '</label>';我的想法是在<

问使用Javascript添加内联样式
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript添加内联样式EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Javascript添加内联样式
EN