JS里添加样式

JavaScript05

JS里添加样式,第1张

JS里添加样式的方法：

1、首先，要创建标签，使用document.createElement函数，如图创建div标签。使用其className设置class，id设置id，style设置样式。

2、样式的设置也可以分项进行。如图是分项设置其left，top，display，position，width几个样式。

3、通过设置标签的innerHTML属性可以直接给其添加子标签以及子标签的样式。当然，也可以分项分层添加标签。

4、设置好标签（如图是div标签，变量名box），使用document.body.appendChild添加标签到body当中。

5、标签添加以后，依然可以修改样式，如图是使用document.getElementById方法根据id获取标签，修改style。

6、标签添加以后，也可以给其添加和删除event处理。如图是使用jQuery给id为img-preview-box的标签添加hover鼠标经过的处理。

//虽然只有一行数据 但是可以任意行 任意列 需要重置的input 加上val属性 设置成初始值就可以$('#reset').click(function(){//重置方法$('[val]').each(function(){//遍历标签 赋值初始值this.value = $(this).attr('val')})})

通常我们将网页的样式和内容分开，样式放在css文件，内容放在html文件，当html文件需要用到样式的时候，直接引用css中定义的样式就可以了。其实JavaScript也能使用css文件或直接改变样式的属性来动态的改变网页的样式。

1、JavaScript设置内联样式

改变样式最直接的方法就是改变元素节点的style属性。如：

myElement.sytle.color = “red”

myElement.sytle.left = “40px”

myElement.sytle.backgroundRepeat = “repeat-x”

JavaScript设置内联样式时，采用和css设置样式一样的风格。如设置myElement的color属性时，我们可以赋值任何在css中可以用的值，所以这里除了可以使用”red”，还可以使用”blue”, ”yellow”或十六进制的”#ff0000”。

另外用JavaScript改变网页的属性还需要注意2点：

l JavaScript中采用驼峰命名法：在css中，属性名中的单词之间是用横杠隔开，如font-weight, background-color。但在JavaScript中，横杠可能被认为是减号，所以采用驼峰命名法，单词之间不用横杠，如font-weight在JavaScript中应该写成fontWeight而background-color写成backgroundColor。

l JavaScript中属性值为字符串：在css中，属性值都写在双引号中，即要用字符串来给css相关属性赋值，同样当属性值有单位时，我们需要将单位也写在字符串中。

2、JavaScript设置外部样式

当你需要改变的样式已经在css文件中定义了，我们也可以用JavaScript直接用定义好的css样式。如下格式：

myElement.className = “someCSSclass”

同样需要注意几点：

l 不要将className写成class，因为class是JavaScript保留的关键字，我们不能使用。

l 将定义在css中的样式直接赋值给className，就能改变myElement元素的样式。

l 当要删除元素的样式，可以给className属性赋值为空。如：

myElement.className = “”

教程网 站-秒秒学上的JavaScript课程有一个章节专门讲解JavaScript改变样式的内容，可以看看，希望对你有帮助。