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


189

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

1
Что будет allMyStyleв вашем примере? В начале у вас есть список отдельных переменных ...
Феликс Клинг

1
Размер шрифта: 12px; Слева направо : 200px; вверху: 100px
Мирча

1
Если это сработает, это будет строка, содержащая весь CSS, который нужно установить: document.getElementById ("myElement"). Style = font-size: 12px; Слева направо : 200px; вверху: 100px
Мирча

@Mircea: Посмотрите на мой ответ .... вы можете использовать cssText.
Феликс Клинг

@ Феликс Клинг это то, что я ищу. Не делать много повторных потоков и перерисовок. Я не уверен, будет ли он работать с моим кодом, но так и должно быть! Спасибо
Мирча

Ответы:


277

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

document.getElementById("myElement").style.cssText = "display: block; position: absolute";

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

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


64
document.getElementById ("myElement"). style.cssText + = ';' + cssString; возвратит «нормализованное» значение для element.style.cssText - новая строка заменит существующие именованные свойства любыми новыми значениями, добавит новые и оставит остальные в покое.
Кеннебек

2
@kennebec: Только что попробовал, и вы правы. Я этого не знал, я просто подумал, что это дополняет уже существующий текст. Но это действительно заменяет ценности ...
Феликс Клинг

1
Я надеялся, что кто-нибудь получит это и использует это - я никогда не видел, чтобы это было документировано. Хороший ответ, кстати.
Кеннебек

33
@kennebec Я провел тест jsperf и обнаружил, что применение нескольких правил CSS в последовательности по сравнению с использованием метода cssText быстрее: jsperf.com/csstext-vs-multiple-css-rules/4
Андрей Онига

2
@RohitTigga: строка, содержащая правила CSS. Например display: block; position: absolute;.
Феликс Клинг

280

Используя Object.assign :

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

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

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

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

16
К сожалению, этот метод не поддерживается IE11. kangax.github.io/compat-table/es6/…
AndrewSilver,

2
@AndrewSilver - используйте babel &&, одну из многих библиотек polyfill, чтобы получить поддержку функций ES6 в несовместимых браузерах.
Периата Breatta

1
При использовании babel, это метод! Отлично!
ниразуул

1
@Nirazul Как это использовать? Я пытаюсь, document.querySelector('html').style = Object.assign({}, document.querySelector('html').style, { color: 'red'})но ничего не происходит.
Джонатан Дион

1
Этого будет достаточно, если вы развернете простой объект javascript - не нужно вообще ничего назначать: Object.assign(document.querySelector('html').style, { color: 'red' });... Просто убедитесь, что стиль не перезаписан в нижнем элементе. Это очень вероятно при использовании его на htmlэлементе.
nirazul

51

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

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

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


removeAttributeможет пригодиться тем, кто может подумать об использовании setAttributeдля сброса стиля
che-azeh

41

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

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


Я использовал свойство .style каждый раз по отдельности, чтобы не переопределять изменение стиля, но это работает лучше, более сжато.
Драгонор

2
Лучшее решение, потому что оно гибкое и полезное, как cssText, но быстрее.
Саймон Стейнбергер

17

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

2
Да, но в этом проекте я не могу использовать jQuery ... Спасибо
Мирча

нужно написать размер шрифта как fontSize?
Середина

1
Да. Свойства чувствительны к регистру даже при использовании строковых обозначений. Это должно быть fontSize: 12px.
MyNameIsKo

Я бы сказал, размер шрифта;)
mikus

14

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

13

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

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

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

document.querySelector('*').style = styles
a


1
Я тоже использую этот метод, потому что он полезен, если у вас нет других встроенных стилей, но иногда это вызывает проблемы.
Любопытный

Если проблемы возникают, то только из-за плохой реализации. Все зависит от того, как, когда и где вы примените его к своему коду.
Thielicious

3

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

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

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

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

Это не вариант, потому что переменные являются динамическими
Мирча

Это не совсем то, что спросил пользователь, но, скорее всего, это наиболее жизнеспособное решение. +1
Райан Кинал

2
@Sachin "font-size" должен быть в верблюжьей оболочке как "fontSize". Имена стилей с гифнами не гарантированно будут работать в разных браузерах, если вы не используете setAttribute.
Ашвин Прабху

2

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

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

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

2

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

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

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

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

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


1
Это не так, вы можете установить все стили одновременно cssText.
Феликс Клинг

2
@Felix: cssTextотлично подходит для установки значения встроенной таблицы стилей. Однако, если у вас также есть классы или вы хотите переопределить только некоторые значения, но не все, это может быть довольно сложно использовать cssText. Так ты прав; Вы можете сделать это, но я рекомендую против этого для большинства случаев использования.
Спадли

1
Ну, наличие классов не является аргументом ... obj.topили obj.style.colorтакже просто устанавливает значение встроенной таблицы стилей. И да, в своем ответе я сказал, что можно перезаписать значения ... это зависит от контекста, полезно это или нет.
Феликс Клинг

1
Вам лучше сделать это obj = document.getElementById ("myElement"). Style; или установите ваши свойства obj.style.top = top.
Кеннебек

@kennebec - хм, мог бы поклясться, что я это сделал. да ладно, отредактировано. спасибо, что заметил.
Спадли

1

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

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)


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

1

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

1

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

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

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


0

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

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


0

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

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

0

Используйте 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>


0

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


0

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


-1
<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>

-1

Мы можем добавить функцию стилей в прототип 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});

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.