[英]Add inline style using Javascript
我正在嘗試將此代碼添加到動態創建的 div 元素
style = "width:330px;float:left;"
創建動態div
的代碼是
var nFilter = document.createElement('div');
nFilter.className = 'well';
nFilter.innerHTML = '<label>' + sSearchStr + '</label>';
我的想法是在< div class="well"
之后添加樣式,但我不知道該怎么做。
nFilter.style.width = '330px';
nFilter.style.float = 'left';
這應該為元素添加內聯樣式。
您可以直接在樣式上執行此操作:
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;");
使用 jQuery :
$(nFilter).attr("style","whatever");
否則 :
nFilter.setAttribute("style", "whatever");
應該管用
你可以試試這個
nFilter.style.cssText = 'width:330px;float:left;';
那應該為你做。
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);
一些人有一個使用我喜歡的 setAttribute 的例子。 但是,它假定您當前沒有設置任何樣式。 我可能會做這樣的事情:
nFilter.setAttribute('style', nFilter.getAttribute('style') + ';width:330px;float:left;');
或者把它變成這樣的輔助函數:
function setStyle(el, css){
el.setAttribute('style', el.getAttribute('style') + ';' + css);
}
setStyle(nFilter, 'width:330px;float:left;');
這確保您可以連續添加樣式,並且不會通過始終附加到當前樣式來刪除當前設置的任何樣式。 它還添加了一個額外的分號,以便如果某個樣式丟失了一個,它將附加另一個以確保它被完全分隔。
你應該創建一個 css 類.my_style
然后使用.addClass('.mystyle')
如果不想逐行添加每個 css 屬性,可以執行以下操作:
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);
使用cssText
nFilter.style.cssText +=';width:330px;float:left;';
嘗試這樣的事情
document.getElementById("vid-holder").style.width=300 + "px";
現在你已經創建了這個類,用css做。 .well {寬度:330px; 向左飄浮; }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.