解释如下：
#对应id
.对应class
不加对应html 标签
归纳成一句话就是：Class可以反复使用而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的现实问题。
用 innerText 获取到的文本信息是除掉空格的。
用 textContent 就可以很好的解决了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兼容性</title>
<style type="text/css">
#btn {
border: none;/*无边框*/
outline: none;/*无轮廓，但是默认就是这个，我感觉应该没有什么影响吧*/
width: 100px;
height: 30px;
text-align: center;/*文字居中*/
padding: 5px 5px;/*内边距*/
margin: 10px 0px;/*外边距*/
background: #F0F0F0;
font-size: 14px;
color: #333;
cursor: pointer;/*cursor属性规定要显示的光标的类型（形状）该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状，这里是一只手*/
}
#div { /*说一下#的作用吧，id用这个，class用.*/
width: 600px;
height: 100px;
background: #C0C0C0;
color: #FFFFFF;
}
</style>
</head>
<body>
<div>
<button id="btn">修改内容</button>
</div>
<div id="div">
The quick brown fox jumps over a lazy dog.
</div>
</body>
<script type="text/javascript">
/*获取任意标签的内容*/
function getInnerText(element) {
// 判断浏览器是否支持textContent,如果支持，则使用textContent获取内容，否则使用innerText获取内容。
if(typeof element.textContent == "undefined") {
return element.innerText;
} else {
return element.textContent;
}
}
/*设置任意标签的内容*/
function setInnerText(element, text) {
// 判断浏览器是否支持textContent,如果支持，则使用textContent设置内容，否则使用innerText设置内容。
if(typeof element.textContent == "undefined") {
return element.innerText = text;
} else {
return element.textContent = text;
}
}
console.log(getInnerText(document.getElementById("div")));
document.getElementById("btn").onclick = function() {
console.log(setInnerText(document.getElementById("div"), "the fonts is changed."));
};
</script>
</html>
4935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
