Js基础--属性读写操作

最新推荐文章于 2024-07-05 11:38:43 发布

Wendy-lxq

最新推荐文章于 2024-07-05 11:38:43 发布

阅读量1.3k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/u010297791/article/details/53348959

版权

JavaScript 专栏收录该内容

52 篇文章 3 订阅

订阅专栏

今天刚好学习Js的基础知识部分中的属性读写操作，所以进行了整理，这样也帮助自己总结和归纳。

HTML的属性操作分为读和写操作，基本的操作方法就是属性名.属性值。

1）属性读操作：获取、找到元素

元素. 属性名

2）属性写操作：替换，修改或者添加

元素.属性名 = 属性值

注意：

1、js中不允许出现“ - ”

这个的意思是我们平时在写样式的时候，比如说margin-top，margin-bottom等，中间是用‘-’连接的，但是在Js中，我们如果想要替换或者修改样式的时候，必须将‘-’去掉，然后将后面的首字母变为大写，比如说marginTop，marginBottom。

下面举一个简单的实例：改变字体大小以及样式进行说明。

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体变大变小以及修改样式</title>
    <style>
        p{
            font-size:15px;
            width: 500px;
        }
        .content{
            width: 400px;
            border:2px solid #00A2E9;
            color:#1b6d85;
            background-color: #b6f3ff;
        }

    </style>
    <script>
        window.onload = function(){
            var changeSmall = document.getElementById("changeSmall");
            var changeBig = document.getElementById("changeBig");
            var content = document.getElementById("content");
            var changeStyle = document.getElementById("changeStyle");
            var num = 15;
            changeBig.onclick = function(){
                num ++;
                // js中不允许出现“ - ”
                // font-size   fontSize
                content.style.fontSize= num+ 'px';
            };
            changeSmall.onclick = function(){
                num --;
                // js中不允许出现“ - ”
                // font-size   fontSize
                content.style.fontSize= num+ 'px';
            };
            changeStyle.onclick = function(){
                content.className="content";
            };
        };
    </script>
</head>
<body>
<input id="changeSmall" type="button" value="-">
<input id="changeBig" type="button" value="+">
<input id="changeStyle" type="button" value="改变样式">

<p id="content">
    假如我们未曾相遇，岸的这边是我，岸的那边是你，凭高远眺也不见对方的影，
    看见了也是陌生，甚至擦肩而过，你是你，我还是我，只因无缘，只因眼中眉间那个人还没有出现，
    只因冥冥中的赏花人还在岸的那边痴痴的等，忘我的等。只因前世之约，为了那一言之盟，为了不失去你，
    不想失去朝思暮想的你，一直等下去，直到你飞舞蹁跹来到我的身边，十指相扣，深情相拥，诉说衷肠。
</p>
</body>
</html>

2、关键字和保留字 var function ---不可以使用

在前面的例子说明，我在修改样式的时候，是通过给该元素直接添加一个class，在js中不能直接是content.class，而是应该是content.className。

changeStyle.onclick = function(){
       content.className="content";
 };

3、改变div的浮动

不同的浏览器对于div浮动float可以识别的方法不一样，在IE中需要使用styleFloat，而在非IE中需要使用CSSfloat，为了不同的兼容性，在写这样样式的时候，最好是写三句话。

oDIV.style.float = "left";

//保险写法：
oDIV.style.styleFloat = "left";
oDIV.style.cssFloat = "left";

//IE(styleFloat)、非IE（CSSFloat）
//可以使用调用className的方式

4、判断的注意事项

1）所有的相对路径都不要拿来判断，但是绝对路径可以进行判断（图片的相对路径可以写但是不能读）
比如说，<img src="images/1.jpg" alt="1">,不同的浏览器在解析src的时候不一样，如下图所示，当我们进行弹出src的值时，是乱码的，因为我的地址里面含有中文，有些浏览器会直接把中文读出来，但是有些不会，而且如果html没有设置编码的时候，也会导致乱码，所以这个相对路径不应该拿来进行判断。

代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>读取src值/title>
<script>
window.onload = function (){
	var oImg = document.getElementById('img1');
	oImg.onclick = function (){
		// if( oImg.src == 'img/1.jpg' ){
		// 不能做为判断条件：
		
		// 1、所有的相对路径地址
		/*	img src
			href 
		*/
			alert(oImg.src );
		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" />
</body>
</html>

2）颜色值不要做判断

因为颜色值的表示方法不同，就常用的方法来说就有3种，第一种是直接颜色的英文：red yellow green等，第二种是十六进制的方法：#ffffff #dfdfdf 等，第三种是rgb的方法：rgb(255,255,255) rgb(0,0,0)等。所以颜色值无法做判断。

3）innerHTML不要拿来做判断

5、Js中允许‘·’替换成‘[]’

如果用js想改变一个属性值，而且这个属性值是一个变量的话，那么久无法通过‘·’实现，比如说oDiv.style.oAttr.value]这个例子来说，本身oDiv.style就是寻找div中的style，那么后面再接上oAttr.value，那就无法知道最后的值到底是什么。所以，在这个例子中就需要再寻找一种方法：用'[]'替换刚才用到的'·'。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js中[]的应用</title>
    <style>
        #div1{
            width:100px;
            height:20px;
            border:1px solid #00A2E9;
        }
    </style>
    <script>
        window.onload = function(){
            var oAttr = document.getElementById("attr");
            var oVal = document.getElementById("val");
            var oBtn = document.getElementById("btn");
            var oDiv = document.getElementById("div1");

            oBtn.onclick = function(){
                oDiv.style[oAttr.value] = oVal.value;
                oAttr.value='';
                oVal.value='';
            };
        };
    </script>
</head>
<body>
    请输入属性名称：<input id="attr" type="text"/><br/>
    请输入属性值：<input id="val" type="text"/>
    <input id="btn" type="button" value="确定"/>

    <div id="div1"></div>

</body>
</html>

其中，我们可以看到鼠标点击事件中oDiv.style[oAttr.value] = oVal.value，oAttr.value是一个变量，就无法直接使用'·'进行操作，需要用'[]'。

Wendy-lxq

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js基础--属性读写操作

今天刚好学习Js的基础知识部分中的属性读写操作，所以进行了整理，这样也帮助自己总结和归纳。 HTML的属性操作分为读和写操作，基本的操作方法就是属性名.属性值。 1）属性读操作：获取、找到元素元素. 属性名 2）属性写操作：替换，修改或者添加元素.属性名 = 属性值注意： 1、js中不允许出现“ - ”
复制链接

扫一扫

专栏目录