CSS和Javascript的作用域和优先级

最新推荐文章于 2023-04-05 15:43:11 发布

weixin_34214500

最新推荐文章于 2023-04-05 15:43:11 发布

阅读量116

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/havefun/archive/2013/05/18/3085012.html

版权

这两天在做HTML的东西，就顺便研究了一下这个问题。下面是一段测试代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Test </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<style>
div{
border-style:dotted;
width:40%;
height:60%;
}
.div1{
border-color:red;
border-width:10px;
}
.div2{
border-color:blue;
}

div{
border-style:dotted;
width:60%;
height:40%;
}
</style>

</HEAD>

<BODY>
<div class="div3 div1 div4 div2 ">ddd</div>

<div>
<style>
div{
border-style:dotted;
width:60%;
height:40%;
}
.div2{
border-color:yellow;
}

.div4{
border-color:red;
}
</style>
<link type="text/css" href="a.css" rel="stylesheet" />
<div class="div3 div1 div2 ">ddd</div>
</div>

</BODY>
</HTML>

a.css代码

.div3{
border-color:black;
margin-left:20px;
}

经过测试发现，CSS的优先级与class中写的前后顺序无关（class="div3 div1 div2 div4"），而与这些Style的加载前后顺序有关。如第一个DIV, Style中包括 div2 和div4。对于border-color这个属性来说，div4后于div2加载，所以应该是red。但div3 Style是最后加载的，所以显示颜色应该是black。

同时发现，CSS的加载是全局的。不论对CSS的引用是在Div中，还是页面最后。如果有重复加载的CSS, 最后一次加载会覆盖前面的加载（一样，最后加载优先）。后加载的CSS中，如果有Style名字与前面相同的，会全局覆盖前面的Style内容。

下面是Javascript测试代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Test </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<script>
var globalB = "B"
function testA(){
alert("This is test a." + globalB);
}
</script>

</HEAD>

<BODY>

<div>

<input type="button" οnclick="testA(); return false" value="Test" width="30px" height="20px" />

</div>

<table><tr><td>

<script>
var globalB = "another B"
function testa(){
alert("this is another test a." + globalB);
}
</script>
<div>
<script type="text/javascript" src="b.js"></script>
</div>
</td></tr></table>

</BODY>
</HTML>

b.js内容：

var globalB = "B in js"
function testA(){
alert("This is test a in js file." + globalB);
}

测试发现，javascript的加载也是全局的。也就是说javascript不论在哪里加载，都是全局的。在代码中，可以调用当前元素之后加载的script。而如果有同名函数或同名全局变量的话，后加载的会覆盖前面加载的。另外发现<script />的写法IE不支持，必须是<script></script>。

转载于:https://www.cnblogs.com/havefun/archive/2013/05/18/3085012.html

weixin_34214500

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS和Javascript的作用域和优先级

这两天在做HTML的东西，就顺便研究了一下这个问题。下面是一段测试代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD> <TITLE> Test </TITLE> <META NAME="Generator" CONTE...
复制链接

扫一扫