gpt4 book ai didi

javascript - 使用 JavaScript 检索自定义 CSS 属性值 - 必须不可能

转载 作者:太空宇宙 更新时间:2023-11-03 17:55:08 24 4
gpt4 key购买 nike

目标是在外部样式表中定义自定义 CSS 属性值。

Fiddle It

外部 CSS:

#myDiv {
--myCustomProperty: 'myCustomValue';
}

标记:

<html>
<div id='myDiv'></div>
</html>

CSS 规范中没有任何内容表明自定义属性无效。但是,浏览器会将它们呈现为无效,但理论上它们应该仍可通过 window.getComputedStyle 或类似方式使用。 Firebug 在样式 Pane 中显示自定义属性及其值,但将其标记为已覆盖。

以下片段来自:http://www.quirksmode.org/dom/getstyles.html

JavaScript:

function getStyle(el,styleProp) {
var x = document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
return y;
}

var value = getStyle('myDiv', '--myCustomProperty');

alert(value);

输出应该是字符串"myCustomValue"

最佳答案

正如所讨论的,也许这会对您有所帮助:

您可以将元素的自定义属性存储在您允许人们编辑的 .json 文件中。

结构可能是这样的:

{
"element": 'myDiv',
"properties": [
{
"propertyName": 'SomeName',
"propertyValue" : 'SomeValue'
},
{
"propertyName" : 'SomeOtherName',
"propertyValue" : 'SomeOtherValue'
},

]

}

然后您需要编写一个 javascript 函数来为任何给定元素找到正确的属性值。这至少适用于所有浏览器。

可以在此处找到搜索 json 对象的示例: Searching JSON objects with JQuery

您可以使用以下方法将 json 文件加载到变量中: Loading local JSON file

它可能仍然不是一个理想的解决方案,但它可以跨浏览器工作。

关于javascript - 使用 JavaScript 检索自定义 CSS 属性值 - 必须不可能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26521258/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com