你的位置:首页 > Java教程

[Java教程]JavaScript学习笔记之CSS


HTML负责结构层,网页的结构层由HTML或者XHTML之类的标记语言负责构建

CSS负责表示层,描述页面内容应该如何呈现。

JavaScript负责行为层,负责内容应该如何响应事件这一问题。

 

能利用css解决的问题不要用js去实现,能用css实现的内容不要在html中使用,每个都应该严格负责自己的领域。

文档里的每个元素都是对象(一切皆对象)

 

文档的每个元素节点都有一个属性style,style包含着元素的样式,查询这个属性将返回一个对象而不是一个简单的字符串,样式都放在这个style对象的属性里

因为每个属性都会包含多个样式,所以要返回一个对象才比较好对属性进行操作!

 

格式:element(元素).style.property(属性样式)

 

如果要得到一个标签的样式:

  1. 从文档里把这个元素找出来
  2. 利用element.style.property获取样式(css样式名之间的-要用驼峰命名法来表示,否则js无法解析。例如:font-family-->fontFamily)

style属性的一个很大的局限性:style只能返回内嵌样式,即只有把css style 添加到标记里,才能用DOM style属性去查询那些信息

                   来自外部的.css文件已经不能再用DOM style检索出来了。

ps:颜色:在css用颜色的英文名来命名颜色,如red,在js中会显示red,如果用#000000类似的用法,js会显示为RGB的格式

 

 

 

为内嵌样式设置属性:

style属性的各个样式,不仅可读,还可写。可以通过style属性去更新样式;

格式: element(元素).style.property(要改变的属性样式) = " value "(引号必加);

注意:只有在css不方便的场合,才可以使用DOM对文档的样式做一些的小的增强,但是css始终是主体;

js特别擅长处理重复性任务,用一个while或者for循环就可以轻松地遍历一个很长的列表

 

 

在.CSS文件中改变样式:(确保网页的表示层和行为层分离的彻底)

与其使用DOM直接改变某个元素的样式,不如通过JavaScript代码去更新这个元素的class属性

技巧:在css样式表里写多一个class属性的样式表,利用setAttribute方法来把标签中class属性的值改变,从而得到新的样式。

className属性:有一个更简单的办法更新class的是使用className属性(是一个可读,可写的属性),只要是元素节点都有这个属性

获取元素的class值,格式: element(元素).className

用className属性和赋值操作符可以设置一个元素的class属性值

格式: element(元素).className = "classname"

使用这个操作可以把新的class值把原先的class的值替换掉。

但有一个问题是,我们有时并不是想要替换掉这个class值,我们只是想在原来的class的值后面再追加一个class的值。

可以使用字符串拼接的方法: element(元素).className += " classname"   注意:在classname前面需要有一个空格

 

推荐步骤:

  1. 检查className属性的值是否为空
  2. 如果是,则直接把class的设置值直接赋给className
  3. 如果不是,则把一个空格和新的class设置值追加到className上面去

 

对函数进行抽象可以使函数的使用范围更广,通过赋予参数调用的方式;当发现可以对一个函数进行抽象时,应该立刻就去做!!!!!!