Как я могу установить несколько стилей CSS в JavaScript?

Question

У меня есть следующие переменные 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 

Answer 1

Использование Object.assign :

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

Это также дает вам возможность объединять стили вместо переписывания стиля CSS.

Вы также можете сделатьфункция быстрого доступа:

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

Answer 2

Если у вас есть значения CSS в виде строки, и для элемента уже не задан другой CSS (или вы не заботитесь о перезаписи), используйте свойство cssText :

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

Это хорошо в некотором смысле, так как позволяет избежать перекрашивания элемента каждый раз, когда вы изменяете свойство (вы как-то меняете их все сразу).

С другой стороны, вы бысначала нужно построить строку.

Answer 3

@ Мирча: Очень легко установить несколько стилей для элемента в одном выражении.Это не влияет на существующие свойства и позволяет избежать сложности использования циклов или плагинов.

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

БУДЬТЕ ОСТОРОЖНЫ: если позже вы используете этот метод для добавления или изменения свойств стиля, предыдущие свойстванабор с использованием 'setAttribute' будет удален.

Answer 4

Создайте функцию, которая позаботится об этом, и передайте ей параметры со стилями, которые вы хотите изменить.

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 вы можете использовать переменные ..

Answer 5

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

JQuery

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

---

Объект и петля

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

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

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

Answer 6

Я только что наткнулся здесь и не понимаю, почему для этого требуется так много кода.

Добавьте свой CSS-код в виде строки.

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

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

<div>a</div>

Answer 7

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

Answer 8

Вы можете иметь отдельные классы в ваших CSS-файлах, а затем назначить имя класса вашему элементу

или вы можете просмотреть свойства стилей как -

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

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

Answer 9

Не думайте, что это возможно как таковое.

Но вы можете создать объект из определений стилей и просто просмотреть их.

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

Answer 10

Используя простой Javascript, вы не можете установить все стили одновременно;вам нужно использовать отдельные строки для каждой из них.

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

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

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

(если Javascript был спроектирован правильно, вы могли бы также использовать ключевое слово with, но это лучшеоставить в покое, так как это может вызвать некоторые неприятные проблемы с пространством имен)