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

См. для .. в

Пример:

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

Answer 2

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

Answer 3

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

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)

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

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

Answer 7

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

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