js操作属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js操作属性相关的知识，希望对你有一定的参考价值。
参考技术A 获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。操作属性的方法
1、“.” 操作
2、“[ ]”操作
属性写法
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
js操作属性
《script type=text/javascript》
widow。onload = function（） 全部加载渲染完之后才执行下一步
document。getElementById（div1）。title= 我看到了；
《/script》
《body》
《div id = div1 class = div1 title = 这是一个div元素，你看到了吗？》
《/body》
在js中有类似font-size这类似的系统回默认为-号，可以用小驼峰 fontSize写法
class属性
需要在class后面加Name
中括号
需要在变量加上中括号。[color]写法
style的写法['style']
document。write 只能重绘整个页面
innerhtml 可以重绘页面的一部分。
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="200" />
</body>
</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="200" />
</body>
</html>
- 属性操作的注意事项
- 给元素添加class
- 行间样式与className
- 表单元素的type值修改
- float的兼容性问题
- IE（styleFloat）、非IE（cssFloat）
- 属性操作中的：[]
- 实例：任意修改DIV的值
- 相对路径的读取问题
- 表单元素的type值修改
- IE6、IE7、IE8 兼容性问题及解决思路
- float的兼容性问题
- IE（styleFloat）、非IE（cssFloat）
- 属性操作中的：[]
- 实例：任意修改DIV的值
JS中不允许出现的特殊字符
不许出现"-",如：font-weight应为fontWeight
关键字、保留字
实例：
<!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 #333; background:red; padding:20px; color:yellow; }
.yellow { width:500px; border:5px solid #333; 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>
<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 #333; background:red; padding:20px; color:yellow; }
.yellow { width:500px; border:5px solid #333; 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>
相对路径的读取问题
所有的相对路径地址，颜色值 均不能作为判断条件
IE6、IE7、IE8不兼容
以上是关于js操作属性的主要内容，如果未能解决你的问题，请参考以下文章