<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function()
{
var oImg = document.getElementById('img1');
var oInp = document.getElementById('inp1');
var oDiv = document.getElementById('div1');
var oText1 = document.getElementById('attr');
var oText2 = document.getElementById('val');
var oBtn = document.getElementById('btn');
var oDIv = document.getElementById('div1');
//注意事项1(相对路径的读取问题)
// oImg.onclick = function()
// {
// alert(oImg.src);
// http://127.0.0.1:8020/html/img/pic_list/1.jpg
// if(oImg.src =='http://127.0.0.1:8020/html/img/pic_list/1.jpg')
// {
// oImg.src = 'img/QQ图片20160623165342.jpg';
// }
// //(1)所有的相对路径都别用来做判断
// //eg:img、src、href='1.css' href='html/index.html'
// //(2)颜色值也别用来做判断
// //eg:color:red #f00 rgb(250,0,0)
// //(3)innerHTML的值别用来做判断
// };
//注意事项2(表单的type元素之修改,IE6 IE7 IE8兼容性问题解决风格)
/*oInp.onclick = function()
{
oInp.type = 'checkbox';
//IE6 IE7 IE8兼容性问题,以上操作不支持会报错
};*/
/*//注意事项2(float兼容性问题)IE下(styleFloat)、非IE下(cssFloat)
oDiv.onclick = function(){
oDiv.style.float = 'left'; //错误,将无法识别
oDiv.style.styleFloat = 'left';//IE下浮动设置方式
oDiv.style.cssFloat = 'left';//非IE下浮动设置方式
//最简单的方式就是写到样式中去
};*/
//[]的使用,js中允许将"."替换成"[]" []内需要加''
oBtn.onclick = function()
{
oDIv.style[oText1.value] = oText2.value;//[]号里面的值可以随便变
};
};
</script>
<!--<style>
.left{float left;}
.right{float right;}
</style>-->
<style>
div{width:100px;height:100px;border: 1px solid red;}
</style>
</head>
<body>
<img id="img1" src = "img/pic_list/1.jpg" />
<input id="inp1" type="button"/>
<div id="div1" class="left"></div>
请输入属性名称:<input id="attr" type ="text"/><br/>
请输入属性值:<input id="val" type="text"/>
<input id="btn" type="button" value="确定">
<div id="div1"></div>
</body>
</html>
08-15
08-15
08-15