Блог

Мне нужно отобразить стиль CSS элемента точно так, как я определил его в его встроенном стиле. Например, у меня есть div, который выглядит так:

 <div
  id="1"
style="background: 
radial-gradient(circle at 50% 0,
  salmon,
  rgba(255,0,0,0) 10px),
radial-gradient(circle at 50% 100%,
  salmon,
  rgba(255,0,0,0) 10px);
background-size: 10px 10px;
"> </div>
  

Я хочу получить СТРОКУ, которая выглядит следующим образом:

 radial-gradient(circle at 50% 0,
  salmon,
  rgba(255,0,0,0) 10px),
radial-gradient(circle at 50% 100%,
  salmon,
  rgba(255,0,0,0) 10px);
background-size: 10px 10px;
  

Я не пытаюсь менять стили, мне просто нужна строка встроенного стиля. У меня много разных элементов с разными стилями.
Я использую document.getElementById(1).style.cssText метод для достижения того, чего я хочу, но он не работает. В Firefox я получаю с ним много разных свойств (например, background-origin , background-clip , и т.д.), Поэтому результат выглядит так:

 background-color: black;
background-position: 0% 0%, 0% 0%;
background-repeat: repeat, repeat;
background-attachment: scroll, scroll;
background-image: radial-gradient(circle at 50% 0px, salmon, rgba(255, 0, 0, 0) 10px), radial-gradient(circle at 50% 100%, salmon, rgba(255, 0, 0, 0) 10px);
background-size: 10px 10px;
background-origin: padding-box, padding-box;
background-clip: border-box, border-box;
  

в то время как в Chrome background-size удаляется. Какой метод я должен использовать, чтобы получить встроенный стиль в строковом формате точно так, как он определен в моем встроенном стиле?

Хорошо, я провел несколько экспериментов:

Как я уже упоминал в своем комментарии, background (и border , …) — это сокращенное свойство, которое может задавать несколько свойств за один раз.

Сначала: Firefox.
При изменении значения атрибута style элемента с помощью elem.style.cssText свойства Firefox распакует все свойства background , которые можно установить, включая их неявные значения по умолчанию. Это означает, что, как вы видели, вы получаете кучу свойств, таких как background-attachment и background-repeat в строке атрибута. Это не влияет на поведение вашего кода, свойства будут применяться так, как вы ожидаете, если вы ставите background первым.

Chrome ведет себя немного не так, как вы ожидаете. В процессе синтаксического анализа нового ввода, который вы предоставили для атрибута style, он расширит свойства, явно и неявно заданные background сокращением, и переопределит любые другие изменения в материалах, связанных с фоном, которые появляются впоследствии вместе с ними. Примечательно, что эта ошибка, похоже, влияет только на JavaScript API, изображение отображается как ожидалось. Такое поведение, скорее всего, является ошибкой в Chrome, поэтому не стесняйтесь подавать его как таковой!

Есть два исправления, которые работают в обоих браузерах и обеспечивают ожидаемое поведение:

1. Вы пытаетесь установить для фона градиент в первом свойстве. CSS учитывает градиенты изображений, поэтому правильным свойством, не являющимся сокращением, для этого будет background-image . Это отключает все действия smart browser в отношении сокращений, поэтому вы должны быть в курсе

    document.getElementById("your-id").style.cssText = "background-image: radial-gradient(circle at 50% 0, salmon, rgba(255,0,0,0) 10px), radial-gradient(circle at 50% 100%, salmon, rgba(255,0,0,0) 10px); background-size: 10px 10px;"
     

2. Используйте другой API. Обычный способ изменения стилей в JavaScript — это изменить значение соответствующего ключа в объекте style. Эти значения также попадают в атрибут style, но вы экономите браузеру немного времени на синтаксическом анализе (даже должно быть немного быстрее). Выполнение того, что вы хотите сделать, будет выглядеть следующим образом:

    let e = document.getElementById("your-id");
   e.style.background = "radial-gradient(circle at 50% 0, salmon, rgba(255,0,0,0) 10px), radial-gradient(circle at 50% 100%, salmon, rgba(255,0,0,0) 10px)";
   e.style.backgroundSize = "10px 10px";
     

Надеюсь, это было полезно, хорошего дня!