JavaScript学习笔记——DOM基础 2.6

时间：2015-08-19 10:40:00 阅读：146 评论：0 收藏：0 [点我收藏+]

标签：

一、CSS-DOM

1、清楚一个概念

HTML负责的是结构，CSS负责的是样式，JavaScript负责的是动作（行为）。

2、style属性

语法：element.style

返回：object

style相对于element是一个属性，而style本身是一个对象，它包含了诸多元素的样式。

关于这一点，可以根据后面的例子去理解。

3、获取样式

例子：element.style.fontFamily

返回：style对应属性的值，如fontFamily，返回“Microsoft yahei”

注意：style.后面的"驼峰式"命名规则

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
<script>
window.onload = function(){
    var myPara = document.getElementById(‘myPara‘);
    var myFontSize = myPara.style.fontSize;
    var myFontColor = myPara.style.color;
    alert(myFontSize);
    alert(myFontColor);
}
</script>
</head>
<body>
<h1>筱雨生</h1>
<p id="myPara" style="font-size:1em; color:rgba(162,47,49,1.00);">時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
  <ul>
    <li title="JavaScript">JavaScript</li>
    <li title="HTML">HTML</li>
    <li title="CSS">CSS</li>
    <li title="我的随笔">我的随笔</li>
    <li></li>
  </ul>
</div>
</body>
</html>

注意：通过style属性获取样式有很大的局限性，因为style属性只能返回内嵌样式，“内嵌”意味着style属性只有在插入HTML标签时，才可以获取到相应的值，也就是说，如果css写在外部，你将获取不到style的属性值。

4、设置样式

我们可以通过DOM的属性来获取元素节点的位置，从而设置它的样式。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
<script>
window.onload = function(){
    var myPara = document.getElementById(‘myPara‘);
    var myFontSize = myPara.style.fontSize;
    var myFontColor = myPara.style.color;
    myPara.onmouseover = function(){
        myPara.style.fontSize = ‘2em‘;
        myPara.style.color = ‘rgba(250,0,0,1)‘;
    }
    myPara.onmouseout = function(){
        myPara.style.fontSize = ‘1em‘;
        myPara.style.color = ‘rgba(162,47,49,1.00)‘;
    }
}
</script>
</head>
<body>
<h1>筱雨生</h1>
<p id="myPara" style="font-size:1em; color:rgba(162,47,49,1.00);">時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
  <ul>
    <li title="JavaScript">JavaScript</li>
    <li title="HTML">HTML</li>
    <li title="CSS">CSS</li>
    <li title="我的随笔">我的随笔</li>
    <li></li>
  </ul>
</div>
</body>
</html>

5、previouseSibling与nextSibling

elementNode.previousSibling返回的是与之紧邻的上一个同级的节点，如果不存在这个节点，则返回null。

elementNode.nextSibling返回的是与之紧邻的下一个同级的节点，如果不存在这个节点，则返回null。

由于在很多浏览器中，会把空格和换行当作文本节点，所以直接应用previousSibling和nextSibling属性的时候就会比较苦逼。

二、响应事件

CSS提供的：hover等伪class属性允许我们根据HTML元素的状态来改变样式，DOM也可以通过onmouseover等事件对HTML元素的状态变化进行响应。

由于CSS提供的伪类不是所有浏览器都可以看到效果，所以有些时候我们不得以用DOM的方法去实现一些想要的效果。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
<style>
*{margin:0; padding:0;}
body{
    font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif,"Microsoft Yahei";
    background:#fff;
    padding:50px;
    color:#333;
}
h1{
    font-family:"Microsoft Yahei";
    font-weight:normal;
    margin-bottom:.2em;
}
p{font-size:.6em;color:#999;}
table{border-collapse:collapse;}
caption{
    font-size:.9em;
    padding:1em;
}
td{
    width:400px;
    text-align:center;
    height:5em;
    border:1px solid #999;
}
</style>
<script>
function addOnLoadEvent(func){
    var oldonload = window.onload; // 把现有的window.onload事件处理函数的值存储到变量oldonload
    if(typeof window.onload != ‘function‘){  // 如果这个处理函数上还没有绑定任何函数
        window.onload = func; // 将这个函数绑定到window.onload事件
    }else{
        window.onload = function(){ // 如果这个处理函数已经绑定了函数，就把这个函数追加到指令的末尾
            oldonload();
            func();
        }
}
}
function stripeTables(){
    if(!document.getElementsByTagName) return false;
    var tables = document.getElementsByTagName(‘table‘);
    var odd,rows;
    for(var i=0; i<tables.length; i++){
        odd = false;
        rows = tables[i].getElementsByTagName(‘tr‘);
        for(var j=0; j<rows.length; j++){
            if(odd == true){
            rows[j].style.backgroundColor = ‘#ffc‘;
            odd = false;
        }else{
            odd = true;
        }
        }
    }
}
addOnLoadEvent(stripeTables);

function highLightTr(){
    if(!document.getElementsByTagName) return false;
    var highLightTr = document.getElementsByTagName("tr");
    for(var i=0; i<hightR.length; i++){
        highLightTr[i].onmouseover = function(){
            this.style.fontWeight = ‘bold‘;
        }
        highLightTr[i].onmouseout = function(){
            this.style.fontWeight = ‘normal‘;
        }
    }
}
addOnLoadEvent(hightLightTr);
</script>
</head>
<body>
<h1>筱雨生</h1>
<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
<table width="300" border="0" cellspacing="0" cellpadding="0">
<caption>我的博客分类</caption>
  <tbody>
    <tr>
      <td>Windows</td>
      <td>iOS </td>
      <td>Android</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>HTML </td>
      <td>CSS</td>
    </tr>
    <tr>
      <td>ActionScript</td>
      <td>Animate</td>
      <td>Others</td>
    </tr>
  </tbody>
</table>
</div>
</body>
</html>

上面这个实例中，stripeTables函数用来实现HTML中表格的偶数行的背景色，当然这个函数还可以衍化成其他；highLightTr函数是用来高亮显示一行的数据。

三、className属性

语法：element.className

返回：一个value值，如果myElement.className = ‘title‘;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script>
window.onload = function(){
    if(!document.getElementsByTagName) return false;
    var myTitle = document.getElementsByTagName(‘h1‘);
    var myElement = myTitle[0];
    myElement.className = ‘title‘;
}
</script>
</head>
<body>
<h1>筱雨生</h1>
<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
<table width="300" border="0" cellspacing="0" cellpadding="0">
<caption>我的博客分类</caption>
  <tbody>
    <tr>
      <td>Windows</td>
      <td>iOS </td>
      <td>Android</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>HTML </td>
      <td>CSS</td>
    </tr>
    <tr>
      <td>ActionScript</td>
      <td>Animate</td>
      <td>Others</td>
    </tr>
  </tbody>
</table>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

*{margin:0; padding:0;}
body{
    font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif,"Microsoft Yahei";
    background:#fff;
    padding:50px;
    color:#333;
}
h1{
    font-family:"Microsoft Yahei";
    font-weight:normal;
    margin-bottom:.2em;
}
p{font-size:.6em;color:#999;}
table{border-collapse:collapse;}
caption{
    font-size:.9em;
    padding:1em;
}
td{
    width:400px;
    text-align:center;
    height:5em;
    border:1px solid #999;
}
.title{
    font-family:"Microsoft Yahei";
    font-weight:normal;
    margin-bottom:.2em;
    color:#AA0002;
}

View Code

上面这个实例中，通过className属性给h1元素节点设定了新的CSS，新的CSS并非来自元素节点的属性，而是来自于外部CSS。

四、题外话

嗨，哈利波特，你的魔法秘籍看到第几章了，能借给我瞅瞅不？

JavaScript学习笔记——DOM基础 2.6

标签：

原文地址：http://www.cnblogs.com/yushengxiao/p/4738217.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行