gpt4 book ai didi

javascript - 检查应用了哪些样式表的方法

转载 作者:太空宇宙 更新时间:2023-11-03 18:18:54 25 4
gpt4 key购买 nike

问题:我想看看哪个样式表在文档中有优先权。

提议:添加一个在所有具有唯一值的样式表中具有相同名称的类。将此类应用于文档末尾的一个 DIV,然后查看应用了哪个值。

代码:

HTML:

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 479px)" href="css/mediaScreen/max479.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-device-width: 480px) and (max-device-width: 767px)" href="css/mediaScreen/min480Max767.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 991px)" href="css/mediaScreen/min768Max991.css" />

<body onload="checksheet();">
<!--content here-->
<div class="sheetValue" id="sheetValue">
</div>
</body>

CSS:

每个样式表都有一个唯一的值,都显示在下面:

.sheetValue {color:#FF0; visibility:hidden; display:none;}/* Yellow stylesheet */
.sheetValue {color:#0F0; visibility:hidden; display:none;}/* Green stylesheet */
.sheetValue {color:#F00; visibility:hidden; display:none;}/* Red stylesheet */
.sheetValue {color:#00C; visibility:hidden; display:none;}/* Blue stylesheet */

JS:

此处检查颜色值,结果决定哪个样式表优先。结果被添加到“文档”对象中的自定义值,以便在函数执行后可以引用它。这对我来说是一个新想法,因此希望得到反馈,我的理由是文档对象不会被删除,因此始终可以被引用。这样函数只需要执行一次,并且可以在不接触 DOM 的情况下连续查找它的值。这提供了低于 0 毫秒的查找时间,onload 的初步执行在 0 到 1 或 2 毫秒之间(我现在只使用日期功能来衡量这一点)。

function checksheet(){
var ac1 = document.getElementById('sheetValue');
if (window.getComputedStyle(ac1,null).getPropertyValue("color") === "rgb(255, 255, 0)"){
document.sheetType = "Yellow";
}
else if (window.getComputedStyle(ac1,null).getPropertyValue("color") === "rgb(0, 255, 0)"){
document.sheetType = "Green";
}
else if (window.getComputedStyle(ac1,null).getPropertyValue("color") === "rgb(255, 0, 0)"){
document.sheetType = "Red";
}
else if (window.getComputedStyle(ac1,null).getPropertyValue("color") === "rgb(0, 0, 204)"){
document.sheetType = "Blue";
}
}

欢迎任何评论、反馈或直接拒绝。

最佳答案

让我感到困惑的部分是您这样做的用例。从您提供的代码示例来看,您似乎包含了一个基于媒体属性查询的特定 css 文件。

虽然我不会在这里详细介绍媒体查询,但您可以通过使用 javascript (screen.width, document.documentElement.clientWidth) 测量屏幕尺寸轻松计算出您想要实现的目标,这将是一个比检查计算的 css 值更好的解决方案(例如:如果计算的颜色以十六进制返回怎么办?)。

看看 http://www.quirksmode.org/blog/archives/2010/08/combining_media.html

虽然它在旧浏览器中不起作用,但还有 window.matchMedia 可以像这样使用:

window.matchMedia('only screen and (min-device-width: 768px) and (max-device-width: 1991px)')

关于javascript - 检查应用了哪些样式表的方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22260747/

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