如何解决如何获取样式属性的文本值?
我需要显示元素的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中的错误,请随时将其归档!
有两种修复程序可在两种浏览器中使用,并产生预期的行为:
- 您正在尝试在第一个属性中将背景设置为渐变。 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;"
- 使用另一个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";
希望对您有帮助,祝您愉快!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。