使用 getComputedStyle().getPropertyValue() 获取边框值? (Mozilla、FF)

发布于 2024-10-03 15:20:28 字数 201 浏览 9 评论 0原文

在某些浏览器(即 Firefox)中,getCompulatedStyle().getPropertyValue() 不会报告任何简写 CSS,例如 border。是否有一种非特定代码的方式来获取这些速记 CSS 值?我考虑过制作一个速记 CSS 及其各自的速记 CSS 值的白名单。但我意识到这样做既会很痛苦,而且是不向前兼容的设计。

In some browsers (namely, Firefox) the getComputedStyle().getPropertyValue() doesn't report anything for shorthand CSS, like border. Is there a non-specific-code way of getting these shorthand CSS values? I've considered making a whitelist of shorthand CSS and their respective longhand CSS values. But I realize doing that would be both a big pain and a non-forward-compatible design.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

最初的梦 2024-10-10 15:20:28

我想知道,你想用像 border: 1pxsolid #000 这样的字符串做什么?

假设您想重现一个元素 border 以便复制它 copyStyle(el2, el, "border")

// Copies a set of styles from one element to another.
function copyStyle(dest, source, shorthand) {
  var computed = window.getComputedStyle(source, null);
  for (var i = computed.length; i--;) {
    var property = camelize(computed[i]);
    if (property.indexOf(shorthand) > -1) {
      console.log(property)
      dest.style[property] = computed[property];
    }
  }
}

// prototype.js
function camelize(text) {
  return text.replace(/-+(.)?/g, function (match, chr) {
    return chr ? chr.toUpperCase() : '';
  });
}

比较两个元素的给定样式集是否匹配可以完成以同样的方式。除此之外,我真的看不到字符串的使用,如果你想用它来计算任何东西,应该解析它。

I'm wondering, what do you want to do with a string like border: 1px solid #000?

Say you want to reproduce an elems border in order to copy it copyStyle(el2, el, "border"):

// Copies a set of styles from one element to another.
function copyStyle(dest, source, shorthand) {
  var computed = window.getComputedStyle(source, null);
  for (var i = computed.length; i--;) {
    var property = camelize(computed[i]);
    if (property.indexOf(shorthand) > -1) {
      console.log(property)
      dest.style[property] = computed[property];
    }
  }
}

// prototype.js
function camelize(text) {
  return text.replace(/-+(.)?/g, function (match, chr) {
    return chr ? chr.toUpperCase() : '';
  });
}

Comparing if two element's given set of styles matches can be done in the same manner. Other than that, I really can't see the use a string, which should be parsed if you want to compute anything with it.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文