js—对元素内容、属性、样式的操作

1.innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签)
2.innerText 用来设置或获取对象起始和结束标签内的文字内容 (IE)
3.textContent 用来设置或获取对象起始和结束标签内的文字内容 (FF)

<div id="box"></div> 
<button id="btn">提交</button>

CSS

box{ 
	width: 300px; 
    height: 200px;
    outline: 1px solid skyblue;
}

innerHTML，将字符串中的
解析了

var box = document.getElementById('box');
var btn = document.getElementById('btn');
var strHtml = '';
btn.onclick = function () {
  strHtml = '英专家:</br>';
  strHtml += '苏伊士运河事件若彻底改变航运</br>';
  strHtml += '中俄将成赢家';
  box.innerHTML = strHtml;
}

代码演示：

innerText与textContent无法将字符串中的
解析

代码演示：

4、对元素样式的操作

获取和设置行内样式：

获取： 对象.style.样式

设置： 对象.style.样式 = 值

<div id="banner"></div>
<h1 id="txt">小戴</h1>

* {
  margin: 0;
  padding: 0;
}

#banner {
  width: 100%;
  height: 360px;
  background-color: #f1f1f1;
  position: absolute;
  top: 50%;
  margin-top: -180px;
}

var banner = document.getElementById('banner');
console.log(banner);

控制台：

改变banner背景颜色

banner.style.backgroundColor = 'rgb(255,155,120)';

代码演示：

改变文本样式

var txt = document.getElementById('txt');
txt.style.fontSize = '60px'; 
txt.style.color = 'skyblue';

代码演示：