从零开始前端学习[50]:js操作标签属性,读写属性标签

js操作标签属性

标签属性
js下操作标签属性

提示：
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

前端的一些标签属性

标签属性：通俗的说，就是写在我们标签里面有等号的一些属性
如img标签固有的属性

<img src="" alt="" title="" id ="" class = "" width = "" height = ""/>
src是图片的路径，alt是对应加载失败的时候的提示，title故名思议就是图片名字

如标签固有的一些属性class,id

<div id = "" class ="" ></div>

而css的属性则是在style属性里面写出来的。二者之间是有区别的

注意：标签属性是可读可写的，即可以读取这些标签属性，同时也可以对这些标签属性进行修改

js下如何去操作标签属性

js对标签属性的读取

js下面是可以通过对象来找到对应标签的属性的，如对于img标签来说:

<img src = "" alt = "" title = "" id ="img_demo" class ="" width="" height =""/>
<script>var img_demo = document.getElementById("img_demo");img_demo.onclick = function(){console.log(img_demo.src);console.log(img_demo.alt);console.log(img_demo.title);console.log(img_demo.id);console.log(img_demo.class);console.log(img_demo.width);console.log(img_demo.height);}
</script>

从上面可以看到，标签属性的获取，就是通过对象.属性的形式获取

即：对象.标签属性

js对标签属性的修改

既然能够读取到标签属性，那么就可以对标签属性进行相对应的修改，
如下所示:

var img_demo = document.getElementById("img_demo");
img_demo.id = "img_demo2";

即通过先获取标签属性，然后再去进行赋值操作
但是注意一点就是:

var img_demo = document.getElementById("img_demo");
var test = img_demo.id;
test = "img_demo2";

以上的这种场景是无效的，因为img_demo.id得到就是img_demo,然后将这个值赋值给了test，所以test是一个常量，常量是不能够进行修改的，所以是失败的。

如下是以img标签为例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><meta charset="UTF-8"><!--申明当前网页的编码集UTF-8--><meta name="Generator" content="EditPlus®">   <!--编辑器的名称--><meta name="Author" content="作者是谁">       <meta name="Keywords" content="关键词"><meta name="Description" content="描述和简介"><style type="text/css">                                        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}ul,ol{margin: 0; list-style: none; padding: 0;}a{ text-decoration: none; }*{ margin: 0; padding: 0; }.main{width: 1200px;box-shadow: 0 0 10px 0 deeppink;margin: auto;padding: 10px;text-align: center;}.main .header{width: 100%;text-align: center;padding: 5px}</style>
</head>
<body>
<div class="main"><div class="header">标签属性</div><img src="img/u=3060298968,3727985394&fm=27&gp=0.jpg" title="dota2图片" class="dota_img_class" id= "dota_img" alt="图片加载" width="534px" height="300px" ><script>var  dota_img = document.getElementById("dota_img");var src = dota_img.src;  //注意，dota_img.src获得的值是一个常量赋值给了src，那么src不能代表dota_img.src，z只能表示是dota_img.src的值var id = dota_img.id;var alt = dota_img.alt;var width = dota_img.width;var height = dota_img.height;var title = dota_img.title;console.log(src,id,alt,width,height,title);dota_img.onclick = function () {dota_img.src = "img/u=516965642,3851528614&fm=27&gp=0.jpg"dota_img.id = "dota_img_id";dota_img.style.width = "400px"; //注意img的宽高只能通过样式来进行更改，普通更改dota_img.width无效，dota_img.style.height = "300px";dota_img.title = "change2"console.log(dota_img.src,  dota_img.id ,dota_img.width,dota_img.height,dota_img.title);}</script>
</div>
</body>
</html>

显示效果如下所示:

从零开始前端学习[50]:js操作标签属性,读写属性标签相关推荐

从零开始前端学习[11]:控制文本显示的样式属性
控制文本显示的样式属性 text-align 文字水平显示方式 line-height 文字垂直显示方式 text-decoration 文本的修饰方式 text-indent 文本的缩进方式 let ...
Web 前端学习之js概述
Web 前端学习之js概述 1.JavaScript 介绍 Javascript 语言诞生主要是完成页面的数据验证.因此它运行在客户端,需要运行浏览器来解析执行JavaScript 代码. JS 是 ...
深圳Web前端学习：js中的模块化--【千锋】
深圳Web前端学习:js中的模块化–[千锋] 0.前言我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的, ...
微信小程序如何通过js操作wxmll的wxss属性
微信小程序如何通过js操作html的css属性在web端.手机端.webApp中可以通过js获取dom的方式设置dom属性. 微信小程序中,不能通过这种方式进行操作. 如何在微信小程序中在wxml中 ...
微信小程序实现通过js操作wxml的wxss属性示例
微信小程序实现通过js操作wxml的wxss属性示例前言实现思路实现代码前言在web端.手机端.webApp中可以通过js获取dom的方式设置dom属性. 微信小程序中,不能通过这种方式进行 ...
【前端学习】D1：HTML简介与HTML标签
文章目录前言系列文章目录 1 HTML简介 1.1 网页 1.1.1 什么是网页? 1.1.2 什么是HTML? 1.1.3 网页的形成 1.2 常用浏览器 1.2.1 常用浏览器 1.2.2 浏 ...
eclipsevue代码怎么运行_[Java教程]使用eclipse初步学习vue.js操作
[Java教程]使用eclipse初步学习vue.js操作 0 2017-11-26 19:00:06 一.vue.js的初步认识 https://unpkg.com/vue ">vu ...
前端学习之——js解析json数组
** 前端学习之--js解析json数组 ** 解析json数组即对JSONArray的遍历一.对于标准的json数组如: var result=[{"flag":1," ...
python前端学习之js
01-Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Ja ...