走入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 这些东西,并不是你写什么路径,它就会获取什么值