Question

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

命题：在具有唯一值的所有样式表中添加具有相同名称的类。将此类应用于文档末尾的一个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：

此处检查颜色值，结果确定哪个样式表优先。结果将添加到“document”对象中的自定义值，以便在执行该函数后引用它。这对我来说是一个新想法，所以会很感激反馈，我的理由是文档对象不会被删除，所以总是可以引用。这样，该函数只需要执行一次，并且可以连续查找其值而无需触及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";
    }
}

任何评论，反馈或彻底解雇都欢迎。

Answer 1

令我困惑的部分是你这样做的用例。从您提供的代码示例中，您可能会看到基于查询媒体属性的特定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)')

检查已应用样式表的方法

1 个答案: