JavaScript에서 여러 CSS 스타일을 설정하려면 어떻게해야합니까?

다음 JavaScript 변수가 있습니다.

var fontsize = "12px"
var left= "200px"
var top= "100px"

나는 이것을 다음과 같이 반복적으로 내 요소로 설정할 수 있다는 것을 알고있다.

document.getElementById("myElement").style.top=top
document.getElementById("myElement").style.left=left

이 모든 것을 한 번에 하나로 묶을 수 있습니까?

document.getElementById("myElement").style = allMyStyle 

CSS 값을 문자열로 가지고 있고 요소에 대해 이미 설정된 다른 CSS가없는 경우 (또는 덮어 쓰지 않아도 됨) cssText속성 을 사용하십시오 .

document.getElementById("myElement").style.cssText = "display: block; position: absolute";

이것은 속성을 변경할 때마다 요소를 다시 칠하지 않기 때문에 의미가 있습니다 (어쨌든 "한 번에 모두"변경).

다른 쪽에서는 먼저 문자열을 작성해야합니다.

Object.assign 사용 :

Object.assign(yourelement.style,{fontsize:"12px",left:"200px",top:"100px"});

또한 CSS 스타일을 다시 쓰는 대신 스타일을 병합 할 수 있습니다.

바로 가기 기능을 만들 수도 있습니다.

const setStylesOnElement = function(styles, element){
    Object.assign(element.style, styles);
}

@Mircea : 단일 문장에서 요소에 대한 여러 스타일을 설정하는 것은 매우 쉽습니다. 기존 속성에 영향을 미치지 않으며 루프 또는 플러그인으로 이동하는 복잡성을 피합니다.

document.getElementById("demo").setAttribute(
   "style", "font-size: 100px; font-style: italic; color:#ff0000;");

주의 사항 : 나중에이 메소드를 사용하여 스타일 특성을 추가하거나 변경하면 'setAttribute'를 사용하여 설정 한 이전 특성이 지워집니다.

처리하는 기능을 만들고 변경하려는 스타일로 매개 변수를 전달하십시오.

function setStyle( objId, propertyObject )
{
 var elem = document.getElementById(objId);
 for (var property in propertyObject)
    elem.style[property] = propertyObject[property];
}

이렇게 불러

setStyle('myElement', {'fontsize':'12px', 'left':'200px'});

propertyObject 내부의 속성 값에 변수를 사용할 수 있습니다.

JavaScript 라이브러리를 사용하면 이러한 작업을 매우 쉽게 수행 할 수 있습니다

jQuery

$('#myElement').css({
  font-size: '12px',
  left: '200px',
  top: '100px'
});

객체와 for-in-loop

또는 훨씬 더 우아한 방법은 기본 객체 및 for 루프입니다.

var el = document.getElementById('#myElement'),
    css = {
      font-size: '12px',
      left: '200px',
      top: '100px'
    };  

for(i in css){
   el.style[i] = css[i];
}

Javascript에서 여러 CSS 스타일 속성 설정

document.getElementById("yourElement").style.cssText = cssString;

또는

document.getElementById("yourElement").setAttribute("style",cssString);

예:

document
.getElementById("demo")
.style
.cssText = "margin-left:100px;background-color:red";

document
.getElementById("demo")
.setAttribute("style","margin-left:100px; background-color:red");

방금 여기에서 우연히 만났는데 왜 이것을 달성하기 위해 너무 많은 코드가 필요한지 알 수 없습니다.

CSS 코드를 문자열로 추가하십시오.

let styles = `
    font-size:15em;
    color:red;
    transform:rotate(20deg)`

document.querySelector('*').style = styles

a

CSS 파일에 개별 클래스를 가지고 클래스 이름을 요소에 할당 할 수 있습니다

또는 스타일 속성을 다음과 같이 반복 할 수 있습니다.

var css = { "font-size": "12px", "left": "200px", "top": "100px" };

for(var prop in css) {
  document.getElementById("myId").style[prop] = css[prop];
}

그것이 가능하다고 생각하지 마십시오.

그러나 스타일 정의에서 오브젝트를 작성하고 반복 할 수 있습니다.

var allMyStyle = {
  fontsize: '12px',
  left: '200px',
  top: '100px'
};

for (i in allMyStyle)
  document.getElementById("myElement").style[i] = allMyStyle[i];

더 발전하려면 기능을 만드십시오.

function setStyles(element, styles) {
  for (i in styles)
    element.style[i] = styles[i];
}

setStyles(document.getElementById("myElement"), allMyStyle);

일반 자바 스크립트를 사용하면 모든 스타일을 한 번에 설정할 수는 없습니다. 당신은 그들 각각에 대해 한 줄을 사용해야합니다.

그러나 document.getElementById(...).style.코드 를 반복해서 반복 할 필요는 없습니다 . 이를 참조 할 객체 변수를 작성하면 코드를 훨씬 더 읽기 쉽게 만들 수 있습니다.

var obj=document.getElementById("myElement").style;
obj.top=top;
obj.left=left;

...기타. 예제보다 훨씬 쉽게 읽을 수 있습니다 (솔직히 jQuery 대안만큼 읽기 쉽습니다).

(자바 스크립트가 올바르게 디자인 된 경우 with키워드를 사용할 수도 있었지만 일부 네임 스페이스 문제가 발생할 수 있으므로 단독으로 사용하는 것이 가장 좋습니다.)

가장 좋은 방법은 스타일을 스스로 설정하는 함수를 만드는 것입니다.

var setStyle = function(p_elem, p_styles)
{
    var s;
    for (s in p_styles)
    {
        p_elem.style[s] = p_styles[s];
    }
}

setStyle(myDiv, {'color': '#F00', 'backgroundColor': '#000'});
setStyle(myDiv, {'color': mycolorvar, 'backgroundColor': mybgvar});

여전히 자바 스크립트 호환 속성 이름을 사용해야합니다 (따라서 backgroundColor)

.. 참조

예:

var myStyle = {};
myStyle.fontsize = "12px";
myStyle.left= "200px";
myStyle.top= "100px";
var elem = document.getElementById("myElement");
var elemStyle = elem.style;
for(var prop in myStyle) {
  elemStyle[prop] = myStyle[prop];
}

이것은 오래된 스레드이므로 현대적인 답변을 찾고있는 사람이라면 Object.keys ();

var myDiv = document.getElementById("myDiv");
var css = {
    "font-size": "14px",
    "color": "#447",
    "font-family": "Arial",
    "text-decoration": "underline"
};

function applyInlineStyles(obj) {
    var result = "";
    Object.keys(obj).forEach(function (prop) {
        result += prop + ": " + obj[prop] + "; ";
    });
    return result;
}

myDiv.style = applyInlineStyles(css);

자바 스크립트와 함께 CSS를 사용하면 이러한 문제에 더 적합한 시나리오가 있습니다. 다음 코드를 살펴보십시오.

document.getElementById("myElement").classList.add("newStyle");
document.getElementById("myElement").classList.remove("newStyle");

이것은 단순히 CSS 클래스 간을 전환하고 스타일 재정의와 관련된 많은 문제를 해결합니다. 심지어 코드를 더 깔끔하게 만듭니다.

제공하지 않는 기존 선언을 덮어 쓰지 않도록 선언을 개별적으로 설정하는 함수를 작성할 수 있습니다. 이 객체 매개 변수 선언 목록이 있다고 가정 해 보겠습니다.

const myStyles = {
  'background-color': 'magenta',
  'border': '10px dotted cyan',
  'border-radius': '5px',
  'box-sizing': 'border-box',
  'color': 'yellow',
  'display': 'inline-block',
  'font-family': 'monospace',
  'font-size': '20px',
  'margin': '1em',
  'padding': '1em'
};

다음과 같은 함수를 작성할 수 있습니다.

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};

해당 객체에 적용 할 스타일 선언 element의 object속성 목록 과 속성 목록 을 가져옵니다 . 사용 예는 다음과 같습니다.

const p = document.createElement('p');
p.textContent = 'This is a paragraph.';
document.body.appendChild(p);

applyStyles(p, myStyles);
applyStyles(document.body, {'background-color': 'grey'});

// styles to apply
const myStyles = {
  'background-color': 'magenta',
  'border': '10px dotted cyan',
  'border-radius': '5px',
  'box-sizing': 'border-box',
  'color': 'yellow',
  'display': 'inline-block',
  'font-family': 'monospace',
  'font-size': '20px',
  'margin': '1em',
  'padding': '1em'
};

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};

// create example paragraph and append it to the page body
const p = document.createElement('p');
p.textContent = 'This is a paragraph.';
document.body.appendChild(p);

// when the paragraph is clicked, call the function, providing the
// paragraph and myStyles object as arguments
p.onclick = (ev) => {
  applyStyles(p, myStyles);
}

// this time, target the page body and supply an object literal
applyStyles(document.body, {'background-color': 'grey'});

위의 모든 솔루션과 관련하여 매우 간단한 방법이라고 생각합니다.

const elm = document.getElementById("myElement")

const allMyStyle = [
  { prop: "position", value: "fixed" },
  { prop: "boxSizing", value: "border-box" },
  { prop: "opacity", value: 0.9 },
  { prop: "zIndex", value: 1000 },
];

allMyStyle.forEach(({ prop, value }) => {
  elm.style[prop] = value;
});

of styles 객체 CSSStyleDeclaration.setProperty()안에 메서드를 사용하십시오 Object.entries.
CSS 속성에 우선 순위 ( "중요")를 설정할 수도 있습니다.
"하이픈 케이스"CSS 속성 이름을 사용합니다.

const styles = {
  "font-size": "18px",
  "font-weight": "bold",
  "background-color": "lightgrey",
  color: "red",
  "padding": "10px !important",
  margin: "20px",
  width: "100px !important",
  border: "1px solid blue"
};

const elem = document.getElementById("my_div");

Object.entries(styles).forEach(([prop, val]) => {
  const [value, pri = ""] = val.split("!");
  elem.style.setProperty(prop, value, pri);
});

<div id="my_div"> Hello </div>

아래 innerHtml이 유효합니까?

var styleElement = win.document.createElement("STYLE");
styleElement.innerHTML = "#notEditableVatDisplay {display:inline-flex} #editableVatInput,.print-section,i.fa.fa-sort.click-sortable{display : none !important}";

로 ES6 + 당신은 또한 사용할 수있는 역 따옴표를 하고도 어딘가에서 직접 CSS를 복사 :

const $div = document.createElement('div')
$div.innerText = 'HELLO'
$div.style.cssText = `
    background-color: rgb(26, 188, 156);
    width: 100px;
    height: 30px;
    border-radius: 7px;
    text-align: center;
    padding-top: 10px;
    font-weight: bold;
`

document.body.append($div)

<button onclick="hello()">Click!</button>

<p id="demo" style="background: black; color: aliceblue;">
  hello!!!
</p>

<script>
  function hello()
  {
    (document.getElementById("demo").style.cssText =
      "font-size: 40px; background: #f00; text-align: center;")
  }
</script>

Node 프로토 타입에 스타일 함수를 추가 할 수 있습니다 :

Node.prototype.styles=function(obj){ for (var k in obj)    this.style[k] = obj[k];}

그런 다음 아무 노드에서나 스타일 메소드를 호출하면됩니다.

elem.styles({display:'block', zIndex:10, transitionDuration:'1s', left:0});

기존의 다른 스타일을 유지하고 object 매개 변수에있는 값을 덮어 씁니다.