走入javascript(四)操作标签属性操作css样式[]的使用

1.在javascript中有很多的属性可以进行读和写,但有很多属性只可读不可写。

eg:

可读可写:

oBox.innerHTML = 'Hello World'; 写操作

alert( oBox.innerHTML );  读操作

2.操作标签属性

(1)知道了id  如何获取title?

<div id="box" title="你好" name="我是名字" afei="我是阿飞" ></div>

alert( oBox.title );     你好

alert( oBox.name ); undefined

alert( oBox.afei ); undefined

div中是没有自定义标签和name标签的,如果获取某标签上的合法标签属性,直接用 .操作 就可以,但是注意获取class的时候 不可以直接使用,一般使用另一种方式代替叫做className。

3.设置标签属性

eg:obox.title = '大家好';

obox.id = 'Lee';

obox.className = 'dachui';

4.动态规则/静态规则

问题1

var oBox = document.getElementByClassName('box');

oBox.id = 'wrap';

这时候oBox还是不是原来的oBox?

oBox还是原来的oBox,通过id获取元素之后,即使变更了id,这个元素还是这个元素。只人标签,不认id或class的名字,只和节点有关

问题2

通过class获取修改class名还是原来的元素么?

length 是一个只读属性,无论如何修改,它都会准确弹出长度。

这就是动态方法和静态方法的区别,动态就是说获取了元素之后不是一个固定的东西,集合不是一个固定的东西,会随着class名的变化而变化,就是说你每用一次

它都会进行重新获取一次，第一次你变更了class名字 重新获取之后 便会从6变成了5.

而静态规则则不同(document.getElementById),单个的元素获取到之后无论怎么修改都可以,而集合是动态变化的则不行。

当你拿出dachui[0]的时候，它从集合变成了元素，元素是永远不会跟着你属性的变化去变化

document.getElementsByClassName('dachui')[0];也可以很好的处理动态问题(单个就是静态规则,多个就是动态规则);

5.自定义属性的操作

(1).操作在操作合法属性的时候,属性才和标签相等，在操作不合法的属性的时候,是完全不同的俩个东西，前者是html的自定义标签,而后者则是js的对象的自定义属性

如果你没有定义自定义属性 而直接进行获取就得到的结果就是 undefined

eg: var obox = document.getElementById('box');

//alert( obox.afei );   ->   undefined

undefined的原因在于 js弹出的是对象的自定义属性 而不是自定义标签 你未对自定义属性进行申明，所以你弹出的永远都是undefined。

(2)getAttribute() 读取自定义属性标签

eg:obox.getAttribute('afei');

(3)setAttribute() 设置自定义属性

俩个参数 第一个是对谁进行修改,第二个参数修改成什么

如果设置一个新的自定义标签,则会将新的属性添加到标签属性中

(4)removeAttribute 删除自定义属性标签

eg:removeAttribute('goudan');  一个参数 对谁操作

getAttribute同时也可以获取合法的标签属性,但是没必要,.操作足矣,也就是说这个标签既可以获取非法的也可以获取合法的。setAttribute removeAttribute也同样可以但是会有差别

比如obx.getAttribute('class')和obox.className 获取的数据是一样的，但是前者的参数是一个字符串,字符串就不会有关键字那么一说,而后者则是一个属性,则要考虑到关键字和保留字

6.操作元素样式

(1)外部样式

单纯的js不采用后台技术,是不可以修改外部文件的

(2)style样式表

js在操作元素属性时,多数是操作标签样式

遇到属性中带有连词符的,删除连词符,连词符后的第一个字母大写

1.第一种操作style的方法

eg:<style id="css">#box{width:100px;}</style>

var ocss = document.getElementById("css");

ocss.innerHTML += 'height:300px;';这种方法也可以修改

2.第二种修改style方法

eg:oBox.style.width = '200px';

如果控制的样式比较多,也可以用cssText

oBox.style.cssText = 'width:300px;height:300px;background:green;';

eg:将代码值赋值给oBox对象下的属性

oBox.style = 'width:300px;height:300px;background:green;';

这样也可以 但是不要去这样写不规范 因为js是不容许给一个属性赋值一个字符串的

3.在实战中一般会使用className进行style属性的操作

eg:

.box{width:100px;height:100px;background:#F60;}

.on{width:200px;height:200px;background:skyblue;}

<div class="box"></div>

var oBox = document.getElementsByClassName('box')[0];

oBox.className = 'on';

当代码量大的时候 建议使用class命名。

4.遗留问题

以前版本的浏览器不支持float属性,需要产改写为cssFloat(主流) styleFloat(IE) 现在版本浏览器都已经支持

5.读取style属性

eg:<div style="width:100px;height:100px;background:#F60;" id="box"></div>

alert( oBox.style );  -> object CSSstyleDeclaration  会告诉你一下 这个值是一个对象 这样操作只能弹出对象的类型

alert( oBox.style.height );   -> 100px

6.style样式

style样式这种获取方法 只能获取行内样式,不能获取实际样式

7.[]的使用

(1)集合

拿到集合中的第几个

document.getElementsByClassName[0];

(2)[]在属性中的操作

eg: var x = 'height';

alert( obox.style.x );

这样操作是不可以的,因为X是一个变量,前者的X为全局变量,而box.style.x则是box的一个私有属性,不可以直接使用,全局变量,自定义属性,标签属性即使名字一样,但仍不相同。

oBox.style.x的意思是 oBox下面的X属性，CSS显然没有这个属性所以obox[x]才可以，这时X才会变成变量X

eg:oBox.style[x]

oBox.style[x] = oBox.style.height

[]能代替大部分.操作来使用,只要把属性值变成字符串就可以

eg:获取到了一个元素 但是它是一个字符串'height'

oBox.style.'height' 肯定是不可用的 

oBox.style['height'] 只能用这个操作字符串

eg:

oBox['onclick'] = function(){

alert('112233');

}

已知属性,但属性是一个字符串,没办法直接使用就可以用[];

8.一些不可用来做判断的属性

background(相对路径 src href) color 这些东西,并不是你写什么路径,它就会获取什么值