Як я можу встановити кілька стилів CSS в JavaScript?

У мене є такі змінні 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'});

для значень властивостей всередині властивостіObject ви можете використовувати змінні ..

Бібліотека JavaScript дозволяє вам робити це дуже легко

jQuery

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

Об'єкт і цикл для введення

Або набагато більш елегантний метод - це базовий об'єкт & for-loop

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

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

встановити декілька властивостей стилю css у Javascript

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);

Використовуючи звичайний Javascript, ви не можете встановити всі стилі одночасно; для кожного з них потрібно використовувати поодинокі рядки.

Однак вам не доведеться повторювати document.getElementById(...).style.код знову і знову; створіть об'єктну змінну для посилання на неї, і ви зробите свій код набагато більш читабельним:

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

... тощо. Набагато легше читати, ніж ваш приклад (і, чесно кажучи, так само легко читати, як альтернатива jQuery).

(якщо Javascript був розроблений належним чином, ви також могли використовувати 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});

Зауважте, що вам все одно доведеться використовувати назви властивостей, сумісних з JavaScript (звідси 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 поряд з JavaScript може мати більше сенсу при такій проблемі. Погляньте на наступний код:

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;
});

Використовуйте CSSStyleDeclaration.setProperty()метод всередині Object.entriesоб'єкта стилів.
Ми також можемо встановити пріоритет ("важливий") для властивості CSS за допомогою цього.
Ми будемо використовувати назви властивостей CSS "hypen-case".

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>

Чи дійсний нижче внутрішній HTML

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});

Він збереже будь-які інші існуючі стилі та замінить значення, присутні в параметрі об'єкта.