반응형
자바 스크립트를 사용하여 인라인 스타일 추가
이 코드를 동적으로 생성 된 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");
작동해야
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);
이것으로 시도 할 수 있습니다.
nFilter.style.cssText = 'width:330px;float:left;';
그것은 당신을 위해 그것을 할 것입니다.
몇몇 사람들은 내가 좋아하는 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);
클래스를 만들었으므로 이제 CSS로 수행하십시오. .well {너비 : 330px; 왼쪽으로 뜨다; }
cssText 사용
nFilter.style.cssText +=';width:330px;float:left;';
이런 식으로 시도
document.getElementById("vid-holder").style.width=300 + "px";
참고 URL : https://stackoverflow.com/questions/14753147/add-inline-style-using-javascript
반응형
'developer tip' 카테고리의 다른 글
보기 쪽이 아닌 목록 개체 템플릿 쪽을 어떻게 제한합니까? (0) | 2020.10.16 |
---|---|
MD5는 128 비트인데 왜 32 자입니까? (0) | 2020.10.16 |
RecyclerView의 행 내부에서 버튼 클릭 처리 (0) | 2020.10.16 |
JavaScript : 문자열에서 마지막 텍스트 교체 (0) | 2020.10.16 |
System.Windows.Media 네임 스페이스를 찾을 수 없습니까? (0) | 2020.10.16 |