เพิ่มสไตล์อินไลน์โดยใช้ 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 ตอนนี้คุณได้สร้างคลาสแล้ว . เวล {width: 330px; ลอย: ซ้าย; }