JS操作属性及其样式

js操作元素样式

1.元素.style.属性='属性值’

var div=document.getElementById('box')
div.style.width='300px';
div.style.height='300px';
div.style.backgroundColor='red';   //css中有-的属性，在js中要改成驼峰命名法

    1
    2
    3

2.div.style.属性 获取元素的样式

var div=document.getElementById('box')
console.log(div.style.width);
console.log(div.style.height);
console.log(div.style.backgroundColor);   //如果要通过style获取样式，只能获取行内样式
**```
3.通过操作类，改变元素的样式**

```php
var div=document.getElementById('box')
div.className += ' one'    //一定要记得+空格

    1
    2
    3
    4
    5
    6
    7
    8
    9

js操作元素内容和元素属性

操作内容：
1.普通元素.innerHTML = “值”； 会把标记执行渲染
2.普通元素.innerText = “值”； 将值原封不动的展示出来，即使里面有标记
3.var s = 普通元素.innerHTML; 会把此元素下的所有文本及标记代码取出来。
4.var s = 普通元素.innerText; 值会把此元素下的文本取出来，标记不予理会。
5.表单元素 - 只能使用value 来取值赋值
6.表单元素.value = “值”;
7.var s = 表单元素.value;
操作相关元素
1.var a=document.getElementById(‘id’); 找到a
2.var b=a.nextSibling; a的下一个同辈 空格回车也算一个同辈
3.var c=a.previousSibling; a的上一个同辈 回车 空格也算一个同辈
4.var b=a.parentNode; a的父级元素
5.var b=a.childNodes; a的子元素 是一个数组6.var b=a.firstchild; a的第一个子元素 lastchild 最后一个子元素 childNodes[ n] 找第n个子元素
7.alert（nodes[i] instanceof Text）判断是不是文本 是返回true 不是返回false
8.有[i]说明是在循环
元素的创建、添加删除
1.var a=document.getElementById(‘id’); 找到a a.appendChild(子元素)
在a里面添加子元素 子元素同上 可以是div
2. a.removeChild(子元素); 删除子元素
3. a.selectIndex 查找的是第几个 4.a.options[a.selectIndex] 按下标取出第几个option对象创建标签5.document.creatElement(“div”); 这里的div 只是其中的一个标签 可以写任何标签