属性注意事项之判断

qq_35476043

于 2016-07-07 09:37:56 发布

阅读量242

点赞数 1

分类专栏： js基础

本文链接：https://blog.csdn.net/qq_35476043/article/details/51848615

版权

js基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>

qq_35476043

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
属性注意事项之判断

window.onload = function() { var oImg = document.getElementById('img1'); var oInp = document.getElementById('inp1'); var oDiv = document.getElementById('div1'); var oText1 = documen
复制链接

扫一扫