假设规则如下:
.largeField {
width: 65%;
}
有没有办法以某种方式获得'65%',而不是像素值？
谢谢.
编辑:不幸的是,在我的情况下使用DOM方法是不可靠的,因为我有一个导入其他样式表的样式表,因此cssRules参数以null或未定义的值结束.
但是,这种方法适用于大多数简单的情况(一个样式表,文档头标记内的多个单独的样式表声明).
我想以百分比形式获得元素的宽度.我使用以下函数来获取样式,但它以像素为单位给出值.这里变量样式可以是任何css属性,如宽度,高度等.
this.getStyle = function(style) {
var elementStyle = window.getComputedStyle(that.element);
var value = elementName.getPropertyValue(style);
return value;
}
我在看CSS3 calc(),我想知道是否可以使用jQuery(或RegEx)从输入字符串中减去一个值.
例如:
div {
width: calc(100% - 50px);
}
我想要得到的百分比值(100%)和像素值(50px),我需要知道它是什么,然后(px,em,pt,%).
所以基本上:
calc(和前一个分隔符(+,-,*,/))calc(100% - 20px - 0.8em)编辑: Spudley谈论解析整个CSS样式表,但这可能会导致开销.因为这个项目为它赫克,开销允许的,所以你可以去失控,做任何你想做到这一点!
谢谢.
我想,这可能是在以前版本的jQuery的默认值,但是当我打电话.css("height")和.height(),它返回计算的高度,这是不是我want-我只想要一个高度值,如果它是在CSS文件中明确声明对于那个元素.
就好像它没有被宣布在任何地方一样,也许它可能会'auto'像顶部和左边那样返回...
例如,我的CSS看起来像这样:
.element{
margin-left:5px;
color:red;
}
.css("margin-left")返回"5px",同时.css("height")返回,20即使它没有专门设置...
谢谢
考虑以下JavaScript，CSS和HTML代码：
console.log(getComputedStyle(document.querySelector('p'), '::after').getPropertyValue('content'));p::after {
content: "Hello" attr(data-after);
}<p data-after=" World"></p>Firefox和IE11都返回CSS：中定义的原始值"Hello" attr(data-after)，这就是我所需要的。
但是Chrome返回"Hello World"，解析后的值。
当我使用Chrome DevTools检查元素时，可以在“样式”面板中看到它显示以下信息：
p::after {
content: "Hello" attr(data-after);
}
因此，看起来Chrome仍然有能力知道原始值。
是否有任何JavaScript解决方案可以使Chrome返回Firefox和IE11这样的CSS定义的原始值？只要可以在JavaScript中使用，即使Chrome独有的方法也很好。
情况说明
在回答成员关于原因的问题时，情况如下：
我正在尝试speak: never在伪元素上为CSS创建一个“ polyfill” 。目前，任何浏览器均不支持该speak属性。
屏幕阅读器可以读取CSS伪元素，目前无法从屏幕阅读器中轻松隐藏它们。解决该问题的常用方法是使用HTML代码（例如）<span aria-hidden="true">...</span>代替方便的CSS伪元素和speak: never，而我认为这种方法既不方便又令人失望。
因此，此polyfill主要与Web可访问性有关。
这种polyfill的工作方式将要求CSS开发人员编写一些额外的CSS代码作为指标，例如attr(speak-never)：
p::after {
content: "please make me inaudible" attr(speak-never);
}
然后在JavaScript中，polyfill循环浏览页面上的每个元素，并检查其伪元素::before和::afterCSS content属性的值是否包含attr(speak-never)。如果找到指示字符串，则填充工具固定伪元素（通过添加自定义元素<before aria-hidden="true">...</before>和<after aria-hidden="true">...</after>编程）。
现在的问题是Chrome无法attr(speak-never)以JavaScript 返回上述内容。尽管polyfill也可以通过要求CSS开发人员添加其他指标（例如 …
我的代码是这样的:
#image_1 {
position: absolute;
top: 3vw;
}
我的尝试:http: //jsfiddle.net/z8k6t3fb/1/
我想要'3vw'
可能吗 ？
如何使用 vanilla JS 和跨浏览器解决方案确定元素的 CSS 宽度/高度是否设置为“自动”或“100%”？
使用 style 属性，只返回设置的内嵌样式。
document.querySelector("#foo").style.height
Returns: ""
使用 getComputedStyle 给出一个单位值。
getComputedStyle(document.querySelector("#foo")).height
Returns: "334.641px"
我正在寻求的结果将返回元素上设置的值
Return "auto"
or
Return "80%"
2011 年有一篇关于浏览样式表的旧帖子，但从那时起浏览器有了显着的发展。当然，目前一定有更好的方法吗？
例如，Chrome 的计算属性检查器将在计算出的 px 值下方列出样式属性（如果属性是通过 CSS 设置的，则会有一个小下拉箭头）。它通过以下答案中的 calculateStyleMap()实现这一点，但并非所有浏览器都实现了它。
width: 385px;
100%. .w-full tailwinds.css:6366