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

Ответ 1

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

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

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

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

Ответ 2

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

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

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

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

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

Ответ 3

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

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

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

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

Ответ 5

Библиотека 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];
}

Ответ 6

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

Ответ 7

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

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

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

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

<div>a</div>

Ответ 8

У вас могут быть отдельные классы в ваших файлах css, а затем присваивать имя класса вашему элементу

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

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

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

Ответ 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);

Ответ 10

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

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

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

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

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

Ответ 11

Смотрите для.. в

Пример:

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

Ответ 12

Лучше всего создать функцию, которая устанавливает стили самостоятельно:

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)

Ответ 13

Это старый поток, поэтому я решил, что для тех, кто ищет современный ответ, я бы предложил использовать 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);

Ответ 14

Я создал утилиту JavaScript, называемую styler.js, которая довольно проста в использовании в моем блоге. Это делает получение и настройку стилей CSS невероятно легким.

Найдите его здесь: http://www.tjcafferkey.me/getting-setting-styles-javascript-styler/

Ответ 15

С Zam вы бы сделали это так

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

Ответ 16

Существуют сценарии, в которых использование CSS наряду с javascript может иметь больше смысла в такой проблеме. Взгляните на следующий код:

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

Это просто переключает между классами CSS и решает так много проблем, связанных с переопределением стилей. Это даже делает ваш код более аккуратным.

Ответ 17

Вы можете написать функцию, которая будет устанавливать объявления индивидуально, чтобы не перезаписывать любые существующие объявления, которые вы не предоставили. Допустим, у вас есть этот список параметров объекта объявлений:

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

Ответ 18

Я думаю, что это очень простой способ в отношении всех решений выше:

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