자바 스크립트를 사용하여 인라인 스타일 추가

이 코드를 동적으로 생성 된 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; 왼쪽으로 뜨다; }