二、网页控制 - 3、操作标签属性 - 《02-基于HTML5 CSS3的Web前端设计》

1.标签属性介绍
2.操纵标签属性
4.标签内容属性

1.标签属性介绍

 基本语法
    <font 属性名="值" 属性名="值" ……></font>
    <img 属性名="值" 属性名="值" …… />
 功能
        用于标签的特定显示效果。
 注意：
        标签属性不能混用。
   1、<font>标签属性
        <font color="green" size="6">文本内容</font>
        color="green"  文字颜色为绿色 
        size="6"  文字大小为6
    2、<img>标签属性
        <img src="http://www.yyfun001.com/res/htmlclassics/full/images/page2_bg.png" width="200" />
        src=http://www.yyfun001.com/res/htmlclassics/full/images/page2_bg.png  图片路径
        width="200"  图片宽度为200

eg：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <font color="green" size="6">文本内容</font>
    <img src="http://www.yyfun001.com/res/htmlclassics/full/images/page2_bg.png" width="200" />
</body>
</html>

显示效果：

2.操纵标签属性

（1）获取标签属性值
基本语法
    var变量 = 标签对象.属性名;
功能
        用于获取标签的某个属性的值。
 1、获取<font>标签属性值
        var fontObj = document.getElementById("font1");
        var fontSize = fontObj.size;
        var fontColor = fontObj.color;
        var fontObj = document.getElementById("font1");  获取font标签元素
        var fontSize = fontObj.size;  获取font标签元素的大小
        var fontColor = fontObj.color;  获取font标签元素的颜色

eg：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <font color="green" size="6" id="font1">文本内容</font>
  <img src="http://www.yyfun001.com/res/htmlclassics/full/images/page2_bg.png" width="200" id="img1" />
    <script type="text/javascript">
      var fontObj = document.getElementById("font1");
      var fontSize = fontObj.size;
      var fontColor = fontObj.color;
      alert(fontSize+fontColor);
    </script>
</body>
</html>
显示效果为 ： 6green

（2）设置标签属性值


基本语法
    标签对象.属性名 = 值;

功能
        用于设置标签的某个属性值。

1、设置<font>标签属性值           

        var fontObj = document.getElementById("font1");  获取font标签元素

        fontObj.size = 20;  设置font标签元素的大小为20

        fontObj.color = "orange";  设置font标签元素的颜色为桔色

eg:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <font color="green" size="6" id="font1">文本内容</font>
  <img src="http://www.yyfun001.com/res/htmlclassics/full/images/page2_bg.png" width="200" id="img1" />

    <script type="text/javascript">
      var fontObj = document.getElementById("font1");
      fontObj.size = 20;
      fontObj.color = "orange";
    </script>
</body>
</html>

3.标签offset属性

基本语法
    var 变量 = 标签对象.offsetWidth;

    var 变量 = 标签对象.offsetHeight;

    var 变量 = 标签对象.offsetLeft;

    var 变量 = 标签对象.offsetTop;

功能
        offsetWidth 获取标签对象的宽

        offsetHeight获取标签对象的高

        offsetLeft获取标签对象的宽左边距

        offsetTop获取标签对象的上边距

eg:
<img>标签属性           

        var imgObj = document.getElementById("img1");

        var width = imgObj.offsetWidth;

    var height = imgObj.offsetHeight;

    var left = imgObj.offsetLeft;

    var tops = imgObj.offsetTop;

    var width = imgObj.offsetWidth;  获取img标签的宽度

    var height = imgObj.offsetHeight;  获取img标签的高度

    var left = imgObj.offsetLeft;  获取img标签的左边距

    var tops = imgObj.offsetTop;  获取img标签的上边距

4.标签内容属性

基本语法
标签对象.innerHTML
标签对象.innerText
功能
innerHTML设置或获得标签内部html内容
innerText设置或获得标签内容text内容
注意：
只有双标签才具有该属性。
    1、获得<div>标签内容           

        var obj1 = document.getElementById("div1");

        var txt1 = obj1.innerHTML;

    var txt2 = obj1.innerText;

    var txt1 = obj1.innerHTML;  获得div中的html内容

    var txt2 = obj1.innerText;  获得div中文本

eg:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <div id="div1">
      <font color="green" size="6">文本内容</font>
    </div>
<div id="div2">
    <img src="http://www.yyfun001.com/res/htmlclassics/full/images/page2_bg.png" width="200" />
</div>

    <script type="text/javascript">
      var obj1 = document.getElementById("div1");
      var txt1 = obj1.innerHTML;
      var txt2 = obj1.innerText;

      alert("txt1："+txt1+" txt2："+txt2);

    </script>
</body>
</html>