js操作元素样式元素内容和元素属性的方法

元素样式

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

var div=document.getElementById('box')

div.style.width='300px';

div.style.height='300px';

div.style.backgroundColor='red';   //css中有-的属性，在js中要改成驼峰命名法

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.通过操作类，改变元素的样式

var div=document.getElementById('box')

div.className += ' one'    //一定要记得+空格

元素内容

获取元素内容

  function getContent(){
	//获取元素对象
    var div=document.getElementById("div");
   //修改元素内容
	alert(div.innerHTML);//<b>111</b>
	
    alert(div.innerText);//111
 }

修改元素内容

function updateContent(){
		//获取元素对象
		var div=document.getElementById("div01");
		//修改元素对象
	
		div.innerHTML="<b> 111</b>";
		
		//div.innerHTML=div.innerHTML+"<b>111</b>";追加内容
		
	}

获取元素对象
获取
元素对象名.innerHTML//返回当前元素对象的所有内容，包括HTML标签
元素对象名.innerText//返回当前元素对象的文本内容，不包括HTML标签
修改
元素对象名.innerHTML=“新的值”//会将原有内容覆盖，并HTML标签会被解析
元素对象名.innerHTML=元素对象名.innerHTML+“新的值”//追加效果
元素对象名.innerText=“新的值”//会将原有内容覆盖，但HTML标签不会被解析，会作为普通文本显示。

元素属性

JS有两种获取元素属性的方式：
1）元素.属性名

var div1 = document.getElementById('div1');

div1.style.width = '100px';

2）元素[‘属性名’]

var div1 = document.getElementById('div1');

div1.style['width'] = '100px';

两种方式的区别：
1）第一组种方式简单、好用。
2）第二组方式可以解决一些第一种方式解决不了的问题，例如通过参数传递属性名。