js学习-基本属性2-CSDN博客

本文链接：https://blog.csdn.net/weixin_48235555/article/details/106674928

在网页里改变颜色背景等属性

通过改变class值:

注意要写成className，而不是class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red{
            width: 50px;
            background : red;
            padding : 20px;
            color : yellow;
            border : solid 10px #000;
        }
        .yellow{
            width:500px;
            border:5px solid #000;
            background:yellow;
            padding:10px;
            color:red;
        }
    </style>
    <script>
        window.onload = function () {
            var oBtn3 = document.getElementById('btn3');
            var oBtn4 = document.getElementById('btn4');
            var oP = document.getElementById('p1');

            oBtn3.onclick = function () {
                oP.className = 'red';
            };
            oBtn4.onclick = function () {
                oP.className = 'yellow';
            };
        }
    </script>
</head>
<body>
    <input id="btn3" type="button" value="变红">
    <input id="btn4" type="button" value="变黄">
    <p id="p1" style="font-size: 16px;">
        这节课我学习到了如何在网页里改变颜色背景等属性
    </p>
</body>
</html>

关于表单元素的属性值修改问题

oDiv.style.float = ‘right’; //不能直接这样写

以下是正确的写法：

oDiv.style.styleFloat = ‘right’; // IE
oDiv.style.cssFloat = ‘left’; // 非IE

IE（styleFloat）
非IE（cssFloat）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background: #0e92b3;
        }
        #div2{
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>
    <script>
        window.onload = function () {
            var oText1 = document['getElementById']('text1');
            var oText2 = document['getElementById']('text2');
            var oBtn = document.getElementById('btn');
            var oDiv1 = document.getElementById('div1');
            var oDiv2 = document.getElementById('div2');

            // oBtn.onclick = function () {
            //     oText1.value   //  width    background
            //     oText2.value   //  200px      #fff
            //
            //     oDiv1.style.width = oText2.value;  // . 后面的值无法修改
            //     oDiv1.style.oText1.value = oText2.value;  // 无法实现
            // };
            //解决这个问题用到【】
            // . 可以替换成 【】，但是要加‘’
            // oBtn.onclick  可以写成   oBtn['onclick']
            // var oDiv2 = document.getElementById('div2');   可以写成   var oDiv2 = document['getElementById']('div2');
            oBtn.onclick = function () {
                oDiv2.style[oText1.value] =oText2.value;
            };
        };
    </script>
</head>
<body>
    请输入属性名称：<input id="text1" type="text">
    <br/>
    请输入属性值：<input id="text2" type="text">
    <input id="btn" type="button" value="确认">
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

相对路径的问题

不能做为判断条件：

1、所有的相对路径地址
img src
href

2、颜色值：color: red #f00 rgb() rgba()

3、innerHTML不要拿来做判断

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
   var oImg = document.getElementById('img1');
   
   oImg.onclick = function (){
      // alert( oImg.src );
        // img/1.jpg
        // file:///C:/Users/Administrator/Desktop/11-4-JS1/img/1.jpg
        // if( oImg.src == 'img/1.jpg' ){
       

      if( oImg.src == 'file:///C:/Users/Administrator/Desktop/11-4-JS1/img/1.jpg' ){
         oImg.src = 'img/2.jpg';
      }
   };
};
</script>
</head>

<body>

<img id="img1" src="img/1.jpg" width="400" />
<input id="opt1" type="button">
<script>
    var olnp = document.getElementById('opt1');
    olnp.onclick = function () {
        oInp.type = 'checkbox';
        //IE6 IE7 IE8 不支持，会报错
    }
</script>
</body>
</html>

js中的判断语句

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

oBtn.onclick = function (){
		if( oText.value == '' ){
			alert('没说话呢，别急着点');
		}else{
			oDiv.innerHTML += oStrong.innerHTML + oText.value + '<br />';
			oText.value = '';
		}

oBtn1.onclick = function (){
		if( num > 12 ){
			num -= 2;
			oP.style.fontSize = num + 'px';
		}
	};
	oBtn2.onclick = function (){
		if( num < 30 ){
			num += 2;
			oP.style.fontSize = num + 'px';
		}
	};

oBtn.onclick = function (){
		if( oText.value == '' ){
			alert('请输入');
		} else if ( oText.value == 'CSS' ){
			alert('ok，您输入的是：CSS，恭喜通过！');
		} else if ( oText.value == 'JS' ){
			alert('ok，您输入的是：CSS，恭喜通过！');
		} else if ( oText.value == 'HTML5' ){
			alert('ok，您输入的是：CSS，恭喜通过！');
		} else {
			alert('我不喜欢你写的内容：' + oText.value + '，不能通过');
		}
	};

实现图片切换的功能

用到了布尔值

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

</head>

<body>

<img id="img1" src="img/2.jpg" width="200" />

<script>
var oImg = document.getElementById('img1');
var onOff = true;		// 布尔值：true 1  false 0

oImg.onclick = function (){
	// if( oImg.src == 'img/2.jpg' ){
	// 有条件，就用现成的，如果没有，创造条件也得做事
		
	if( onOff ){
		oImg.src = 'img/4.jpg';
		onOff = false;
	} else {
		oImg.src = 'img/2.jpg';
		onOff = true;
	}
};

</script>

</body>
</html>