javascript - 如何从 CSSStyleDeclaration 对象获取真正的 css 属性名称?

标签 javascript css

问题是一些css属性有不同的名称是javascript,例如js中的textOverflow是css中的text-overflow

在 js 引擎的某处是否有一个我可以访问的翻译表,或者我必须自己做一个翻译数组或对象,如:

transObj = { textOverflow : 'text-overflow' };

例如我正在遍历这个对象,我得到的只是 js 名称:

for (var n in csd) {
  if (!csd.hasOwnProperty(n)) continue;
  csd[n].getTrueCSSName() // is there something like this ?
}

或者也许简单的正则表达式替换就可以了,但我不知道是否规则将 js 名称中的所有大字母都转换为 css 名称中的 -[a-z]

最佳答案

所有包含 - 的 css 样式都被替换为它们在 ECMAscript 中的 camelCase 表示,因为我们不能在所有情况下都使用 - .您可以通过调用如下正则表达式来翻译名称:

var name = "font-width";

// convert names like "font-width" into css camelCase form like "fontWidth"
name = name.replace( /-(\w)/g, function _replace( $1, $2 ) {
    return $2.toUpperCase();
});

它也适用于 -webkit-box-shadow 或诸如此类的东西。

关于javascript - 如何从 CSSStyleDeclaration 对象获取真正的 css 属性名称?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11799364/

相关文章:

javascript - 如何让我的组件返回其自身的序列化?

javascript - 通过 promise 加载 angular 1.5 组件模板

html - 如何在CSS中将水平列表对齐到中心

javascript - 如何在谷歌地图上添加窗帘

css - 如何创建一个简单的 CSS 徽章系统

javascript - 如何从 JSON 文件在 Gatsby 中创建页面?

javascript - 加速:visible:input selector avoiding filter

css - 带有 overflow-y 的元素改变了 flexbox 父容器中的宽度

javascript - 使用 localStorage.getItem() 获取不同属性的值?

jquery - 使用 jquery 鼠标悬停时如何更改链接颜色