Как я могу установить несколько стилей 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'});

для значений свойств внутри propertyObject вы можете использовать переменные ..

Библиотека JavaScript позволяет вам делать эти вещи очень легко

JQuery

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

Объект и для цикла

Или, гораздо более элегантный метод - это базовый объект и цикл

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>

Действителен ли ниже 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];}

Затем просто вызовите метод styles на любом узле:

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

Он сохранит любые другие существующие стили и перезапишет значения, присутствующие в параметре объекта.