JavaScript标签位置不同对于body标签页面颜色渲染的不同效果

JavaScript标签位置不同对于body标签页面颜色渲染的不同效果

 1.当JavaScript标签位于body标签内时：在定义一个<body>开始标记时，使用bgcolor属性将页面的背景设置为红色，接下来使用<script>开始标记告诉浏览器，下面是JavaScript代码，然后执行JavaScript里面的代码，此时JavaScript将文档的背景色设置为蓝色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将背景色改成红色</title>
</head>
<body bgcolor="red">
    <p>Paragraph 1</p>
    <script type="text/javascript">
        document.bgColor = "blue";
    </script>
</body>
</html>

 　其渲染效果如图：

 

2.将script标签放到head标签内：body中设置的颜色会覆盖script中设置的颜色，结果为红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将背景色改成红色</title>
    <script type="text/javascript">
        document.bgColor = "blue";
    </script>
</head>
<body bgcolor="red">
    <p>Paragraph 1</p>
</body>
</html>

其渲染效果如图：

 

3.将script标签放到body结束标签后面：其效果为蓝色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将背景色改成红色</title>
    
</head>
<body bgcolor="red">
    <p>Paragraph 1</p>
</body>
<script type="text/javascript">
    document.bgColor = "blue";
</script>
</html>

其渲染效果如图：

 

 

 

4.将script标签放到html结束标签后面：其效果为蓝色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将背景色改成红色</title>
    
</head>
<body bgcolor="red">
    <p>Paragraph 1</p>
</body>
</html>
<script type="text/javascript">
    document.bgColor = "blue";
</script>

其渲染效果如图：

posted @ 2017-03-01 16:55  JaneBaby  阅读(669)  评论(0)    收藏  举报