JS 操作元素的属性、换肤 、 中括号操作属性、等......
1、代码块
我们的程序是由一条一条语句构成的
语句是按照自上向下的顺序一条一条执行的
在JS中可以使用{}来为语句进行分组,
同一个{}中的语句我们称为是一组语句，
它们要么都执行，要么都不执行，
一个{}中的语句我们也称为叫一个代码块
在代码块的后边就不用再编写;了
JS中的代码块，只具有分组的的作用，没有其他的用途
代码块内容的内容，在外部是完全可见的
{ //js里面是用大括号写内容
var a =10;
alert("hello");
console.log("你好");/*向控制台输出*/
document.write("语句");/*向body里输出*/
}
console.log("a= " +a);
2、js操作属性
DOM是为了操作文档（网页）的API，document是它的一个对象
BOM是为了操作浏览器的API，window是它的一个对象
常用BOM对象还有：alert、定时器等
操作属性的方法
1、“.” 操作
2、“[ ]”操作
属性写法
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
通过“.”操作属性：
<script type="text/javascript">
window.onload = function(){
var oInput = document.getElementById('input1');
var oA = document.getElementById('link1');
// 读取属性值
var val = oInput.value;
var typ = oInput.type;
var nam = oInput.name;
var links = oA.href;
// 写(设置)属性
oA.style.color = 'red';
oA.style.fontSize = val;
}
</script>
......
<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" id="link1">传智播客</a>
通过“[ ]”操作属性：
<script type="text/javascript">
window.onload = function(){
var oInput1 = document.getElementById('input1');
var oInput2 = document.getElementById('input2');
var oA = document.getElementById('link1');
// 读取属性
var val1 = oInput1.value;
var val2 = oInput2.value;
// 写(设置)属性
// oA.style.val1 = val2; 没反应
oA.style[val1] = val2;
}
</script>
......
<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.itcast.cn" id="link1">传智播客</a>
innerHTML
innerHTML可以读取或者写入标签包裹的内容
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//读取
var txt = oDiv.innerHTML;
alert(txt);
//写入
oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';
}
</script>
......
<div id="div1">这是一个div元素</div>
3、js换肤
<link rel="stylesheet" type="text/css" href="css/1.css" id="link1"> 引入外部样式
<script type="text/javascript">
window.onload =function () {
//操作css目录的下的样式
var link1 =document.getElementById('link1');
// link1.href = "css/2.css"; css1的样式
console.log(link1.id); css1的样式
}
</script>
4、js操作style属性
<script type="text/javascript">
window.onload =function () {
var div1 =document.getElementById('div1');
div1.style.color ='red';
div1.style.background ='gold';
div1.style.fontSize ='30px';
//操作的属性的时候带 减号（-）的使用小驼峰 ，不带减号的照常使用
}
</script>
5、js操作class
<style type="text/css">
.box01{
width:200px;
height:200px;
background-color:gold;
}
.box02{
width:300px;
height:300px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload =function () {
var div1 =document.getElementById('div1');
div1.className ='box02'; //操作class属性 ---> 用className
}
</script>
6、js中括号操作属性
<script type="text/javascript">
window.onload =function(){
var oDiv =document.getElementById('div1');
var attr ='color';
oDiv['style'][attr] ='red';
console.log(oDiv.innerHTML);/*读取*/
var div2 =document.getElementById('div2');
// div2.innerHTML = '这是第二个div元素';
div2.innerHTML ='<a href="http://www.baidu.com">百度网</a>';
/*
document.write和innerHTML的区别
document.write 只能重绘整个页面
innerHTML 可以重绘页面的一部分
*/
// document.write('abcde')
}
</script>
