1、标签属性介绍

基本语法


操纵标签属性 - 图3

功能

用于标签的特定显示效果。

注意：

标签属性不能混用。

代码

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

代码讲解

1、标签属性

文本内容
color=”green” 文字颜色为绿色
size=”6” 文字大小为6

2、操纵标签属性 - 图4标签属性

操纵标签属性 - 图5
src=http://www.yyfun001.com/res/htmlclassics/full/images/page2_bg.png 图片路径
width=”200” 图片宽度为200

2、操纵标签属性

（1）获取标签属性值

属性名必须采用小驼峰命名规则

基本语法

var变量 = 标签对象.属性名;

功能

用于获取标签的某个属性的值。

代码

<!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>

代码讲解

1、获取标签属性值

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标签元素的颜色

（2）设置标签属性值

基本语法

标签对象.属性名 = 值;

功能

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

代码

<!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>

代码讲解

1、设置标签属性值

var fontObj = document.getElementById(“font1”); 获取font标签元素
fontObj.size = 20; 设置font标签元素的大小为20
fontObj.color = “orange”; 设置font标签元素的颜色为桔色

3、标签offset属性 （只读属性）

基本语法

var 变量 = 标签对象.offsetWidth;
var 变量 = 标签对象.offsetHeight;
var 变量 = 标签对象.offsetLeft;
var 变量 = 标签对象.offsetTop;

功能

offsetWidth 获取标签对象的宽
offsetHeight获取标签对象的高
offsetLeft获取标签对象的宽左边距
offsetTop获取标签对象的上边距

代码

<!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 imgObj = document.getElementById("img1");
      var width = imgObj.offsetWidth;
      var height = imgObj.offsetHeight;
      var left = imgObj.offsetLeft;
      var tops = imgObj.offsetTop;
      alert("宽："+width+" 高："+height+" 左："+left+" 上："+tops);
    </script>
</body>
</html>

代码讲解

1、操纵标签属性 - 图6标签属性

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内容（不识别、不显示标签）

注意：

只有双标签才具有该属性。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
  <script type="text/javascript">
      var obj1 = document.getElementById("div1");
      var txt1 = obj1.innerHTML;
      var txt2 = obj1.innerText;
      alert("txt1："+txt1+" txt2："+txt2);
    </script>
</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>
</body>
</html>

代码讲解

1、获得
标签内容

var obj1 = document.getElementById(“div1”);
var txt1 = obj1.innerHTML;
var txt2 = obj1.innerText;
var txt1 = obj1.innerHTML; 获得div中的html内容
var txt2 = obj1.innerText; 获得div中文本

5、驼峰命名规则

（1）大驼峰

名称中所有的单词首字母必须大写
UserInfo、TagLib、Person

(2)、小驼峰

名称中第二个单词开始首字母大写
fontSize、color、face