JS1-属性操作

时间:2023-03-08 16:45:31
JS1-属性操作

属性操作语法

读操作:获取、找到
元素.属性名
写操作:“添加”、替换、修改
元素.属性名 = 新的值

元素.innerHTML => 读取元素里面所有的html代码

元素.innerHTML = 123; => 替换元素里面所有的html代码

实例:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title> <script> window.onload = function (){
    var oBtn = document.getElementById('btn1');
    var oText = document.getElementById('text1');
    var oSelect = document.getElementById('select1');
    var oImg = document.getElementById('img1');
    var oP = document.getElementById('p1');     oBtn.onclick = function (){
        // alert(oBtn.value);        // '按钮'
        // alert( oText.value );
        // alert( oSelect.value );
        
        // 字符串连接
        // oText.value    oSelect.value
        // '刘伟' +  '北京'     =>    '刘伟北京'
        // '刘伟' + '在' + '北京'     =>    '刘伟在北京'
        
        alert(oText.value + ' 在 ' + oSelect.value);
            
        oText.value = oSelect.value;
        oImg.src = oText.value;
        oP.innerHTML = oText.value;
    };
};
</script> </head> <body> <input id="text1" type="text" />
<select id="select1">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="杭州">杭州</option>
</select>
<input id="btn1" type="button" value="按钮" />
<p id="p1">这是一些文字</p>
<img id="img1" src="img/1.jpg" width="" /> </body>
</html>
属性操作的注意事项

JS中不允许出现的特殊字符

不许出现"-",如:font-weight应为fontWeight

给元素添加class
行间样式与className

关键字、保留字

实例:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>替换皮肤
</title>
<script>
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oP=document.getElementById('p1'); 
oBtn1.onclick=function(){
 oP.className='red';
};
oBtn2.onclick=function(){
 oP.className='yellow';

</script>
<style>
.red { width:400px; border:10px solid #; background:red; padding:20px; color:yellow; }
.yellow { width:500px; border:5px solid #; background:yellow; padding:10px; color:red; }
</style>
</head> <body>
<input id="btn1" type="button" value="红" />
<input id="btn2" type="button" value="黄" />
<p id="p1">what are you doing?</p>
</body>
</html>

相对路径的读取问题

所有的相对路径地址,颜色值 均不能作为判断条件

表单元素的type值修改

IE6、IE7、IE8不兼容

float的兼容性问题

IE(styleFloat)、非IE(cssFloat)

实例:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload=function(){
var oFD=document.getElementById("fudong");
var Obtn=document.getElementById("btn");
Obtn.onclick=function(){
oFD.style.float='right';  //会报错
oFD.style.styleFloat='right'; //IE
oFD.style.cssFloat='right';  //非IE
};
}
</script>
</head> <body>
<input type="botton" id="btn"/>
<div id="fudong"></div>
</body>
</html>
属性操作中的:[]

实例:任意修改DIV的值

判断

if(){} 在做这事之前,有个条件
if(){}else{} 2件事,根据条件,选一个来做
if(){}else if(){}else if(){}else if(){}
if(){}else if(){}else if(){}else if(){}else{}