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

最新推荐文章于 2023-04-25 14:30:21 发布

^_^ 小小码nong

最新推荐文章于 2023-04-25 14:30:21 发布

阅读量1.6k

点赞数 2

分类专栏： # 1.从零开始挑战前端文章标签： javascript 属性标签读取属性标签对属性标签进行修改

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_29924041/article/details/78509725

版权

1.从零开始挑战前端专栏收录该内容

57 篇文章 3 订阅

订阅专栏

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>

显示效果如下所示:

这里写图片描述

^_^ 小小码nong

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
从零开始前端学习[50]:js操作标签属性,读写属性标签

js操作标签属性标签属性js下操作标签属性提示：博主:章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041前端的一些标签属性标签属性：通俗的说，就是写在我们标签里面有等号的一些属性如img标签固有的属性<img src="" alt="" title="" id ="" class = "" width = "" heigh
复制链接

扫一扫