如何获取样式属性的文本值？

问题描述

我需要显示元素的CSS样式，就像我在其内联样式中定义的一样。例如，我有一个如下所示的div：

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

我想要一个看起来像这样的STRING：

radial-gradient(circle at 50% 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,0) 10px);
background-size: 10px 10px;
background-origin: padding-box,padding-box;
background-clip: border-box,border-box;

在Chrome background-size中的

被删除。我应该使用什么方法来获得字符串格式的内联样式，而该样式应与我的内联样式中的定义完全相同？

解决方法

好的，所以我进行了一些实验：

正如我在评论中已经提到的，background（和border，...）是一种速记属性，可以一次性设置多个属性。

首先：Firefox。
使用elem.style.cssText属性更改元素的样式属性值时，Firefox将解压缩background可以设置的所有属性，包括它们的隐式默认值。如您所见，这意味着在属性字符串中将获得一堆诸如background-attachment和background-repeat之类的属性。代码的行为不受此影响，只要您将background放在第一位，属性就会像您期望的那样被应用。

Chrome的行为不如您预期。在解析您为style属性提供的新输入的过程中，它将扩展background速记方式显式和隐式设置的属性，并覆盖它们之后随之而来的与背景相关的所有其他更改。奇怪的是，此错误似乎只影响JavaScript API，图像按预期方式呈现。此行为很可能是Chrome中的错误，请随时将其归档！

有两种修复程序可在两种浏览器中使用，并产生预期的行为：

1. 您正在尝试在第一个属性中将背景设置为渐变。 CSS考虑渐变图像，因此正确的非速记属性应为background-image。这会禁用所有速记器上的 smart 浏览器行为，因此您应该对

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

2. 使用另一个API。在JavaScript中更改样式的常用方法是更改​​样式对象中相关键的值。这些值也以style属性结尾，但是您为浏览器节省了一些解析工作（甚至可能快一点）。做您想做的事情看起来像这样：

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

希望对您有帮助，祝您愉快！