html前端学习十三：attribute array

最新推荐文章于 2023-01-14 16:22:58 发布

myt2000

最新推荐文章于 2023-01-14 16:22:58 发布

阅读量265

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/myt2000/article/details/103661172

版权

html 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

attribute 属性

标签属性的修改

	<img id="img" src="1.jpg" alt="1.jpg" width="2560" height="1600" />

</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	var img = document.getElementById("img");
	img.onclick = function(){
		this.src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1517742692207&di=a0e665c1aaae6d0bb693e31360bb5b64&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F140227%2F235111-14022F9410899.jpg";
		this.width="500";
		this.height = '600';
	}
	
</script>

result
点击之后图片发生变化

添加不存在的属性

每种标签仅能支持一部分属性

<div id="box" data-bg="#EE4242" href="http://baidu.com" class="box">123456</div>

例如div标签中没有data-bg属性，添加之后是不能存在的

自定义属性获取方法：

getAttribute 获取属性
setAttribute 设置属性（属性，属性值）
removeAttribute 移除属性

	var box = document.getElementById("box")
	box.onclick = function(){
		// alter(box.getAttribute("data-bg"));//所有属性都能被这个方法获取属性，不管标签属性被不被支持
		var color = box.getAttribute("data-bg");
		box.style.background = color;
		box.style.color = "blue";

		box.setAttribute('tanker','this is writing!');

		box.removeAttribute('href');

可以看出多了tanker的属性
data-bg的属性值颜色赋值给了background

<div id="box" data-bg="#EE4242" class="box" tanker="this is writing!" style="background: rgb(238, 66, 66); color: blue;">123456</div>

autoFileName插件

sublime插件
用于url() img src中提示文件名字

样式获取与更改

先写两个样式

    <style type="text/css">
    	* {
			margin: 0;
			padding: 0;
    	}
    	.box{
    		width: 150px;
    		height: 150px;
    		background: red;
    		border-radius: 50%;
    	}
    </style>
</head>

<body>
    <div id="box" class="box" style="width:200px; height:200px; background: skyblue; "></div>
</body>

dom.currentStyle.CSSattr（仅支持IE8+）

var box = document.getElementById("box");
alert(box.currentStyle.borderRadius);

返回50%

getComputedStyle(dom).CSSattr (支持chrome Firefox)

alert(getComputedStyle(box).width);

返回200px

如何让IE和chrome都能获取样式属性

	function getStyle(dom,attr){
		if(dom.currentStyle){
			return dom.currentStyle[attr];
		} else {
			return getComputedStyle(dom)[attr];
		}
	}
	alert(getStyle(box,"width"));

返回200px

另一种简写方式，三目运算符

三目运算符

if(5==5){
		alert(true);
	} else {
		alert(false);
	}


	//三目运算符
5==5 ? alert(true) : alert(false)

数组 array

数组是继承对象的数据类型
数组：

数组是由序列的集合，每一个值叫元素，而每个元素都有一个位置，这个位置叫索引、下标、偏移
索引最大值（2^32-2）数组最大容纳4294667295个元素
通常情况下，数组访问会比对象访问属性快很多，数组的底层经过了一些优化
数组可以装任意数据类型

弹出数组时，undefined不会显示的

var arr1 = [, , , ];
alert(arr1.length);

返回长度3
数组时可以接受可选逗号结尾

取最后一个元素

alert(arr[arr.length-1]);

添加元素

arr5[20] = {function:function() {alert("This is Object")}}

delete arr[0]; //基本不怎么用
删除元素（逻辑删除元素）不是真实的删除，相当于系统使用undefined重新赋值
真实删除元素

arr.pop()   删除数组最后一个元素  返回删掉的元素
arr.shift()  删除数第一个元素 并返回删掉的元素


alert(arr.push(abcd))

清空所有元素

arr=[];  重新赋值 指针发生变化
arr.length = 0;  仅删除数组，不删除对象

arr.attr = " this is laowang";
alert(arr.attr)

in运算符

对象：判断左边属性是否存在对象
数组：判断当前索引位置是否被赋值

var arr= [1,2,3,4,5];
		var arr1 = [];
		arr1[20]= 1;

		var obj = {name:"brooks",
					age:18};

		alert("age" in obj);

数组剪切：
任意位置删除、插入、替换元素
arr.splice()
参一：起始索引 [Number] 只传参数一：从索引位置开始往后剪掉元素该参数支持负数
参二：剪切个数 [Number]
参三：不定参数，主要用来替换或者插入元素

var arr= [1,2,3,4,5,6,7,8,9];
arr.splice(4)   //返回[1,2,3,4]
arr.splice(4,2)  //返回[1,2,3,4,7,8,9]
arr.splice(-4,2)  //返回[1,2,3,4,5,8,9]  从右往左数 6,7
arr.splice(0);  //清空数组，保留属性

数组转字符串
Array.toString() 没有参数，默认使用逗号拼接数组元素
Array.join() 可以添加参数，默认使用逗号拼接可以使用""拼接元素

        var str = arr.toString();
		alert(typeof str)

		var str = arr.join("");  //返回123456789

js获取所有的节点：

document.getElementByTagName("*");
document.all

for循环判断所有的元素的class名字是否与传进来的className相同

相同的时候，把当前for循环到的元素推进push我们的数组里面，return这个数组

对象的定义：

	var obj = {
		"name":"brooks"
	}
    //调用方式
	obj.name

循环点击事件的复习

获取list的元素属性
获取li的元素属性

<body>

    <ul id="list">
    	<li>111</li>
    	<li>222</li>
    	<li>333</li>
    	<li>444</li>
    	<li>555</li>
    </ul>
<script>
	var list = document.getElementById("list");
	var lis = list.getElementsByTagName("li");

	for(var i=0 ; i<lis.length; i++){
		lis[i].count = i;
		lis[i].onclick = function(){
			alert(this.innerHTML+"当前索引位置"+this.count);
		};
	};
	
</script>

插件安装

view in browser
用于快速打开对应的浏览器

myt2000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html前端学习十三：attribute array

attribute 属性标签属性的修改 <img id="img" src="1.jpg" alt="1.jpg" width="2560" height="1600" /></body><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>...
复制链接

扫一扫