关于在JS中设置标签属性

2017-10-09 23:04 by 清风221, 12790 阅读, 0 评论, 收藏, 编辑

Attribute

该属性主要是用来在标签行内样式，添加、删除、获取属性。且适用于自定义属性。

setAttribute("属性名"，属性值“”)；这个是用来设置标签属性的；

removeAttribute("属性名")；这是用来删除标签属性的。

getAttribute("属性名")；获取标签该属性的值；

obj.style.css样式

该属性主要是用来在标签行内样式，添加、删除、获取属性。不适用自定义属性。

例如设置li标签的宽高，背景色；

li.style.width = "200px";

li.style.height = "200px";

li.style.backgroundColor = "red";

注意在js中，css的属性名用连接符的地方，改为将后面的第一个字母大写，如：background-color ==> backgroundColor ;

js和jquery通过this获取html标签中的属性值

<html>
    <head>
        <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            /** JQUERY 通过当前标签属性名，获取属性的值   */
            function attrsByJquery(obj){
                var v1 = $(obj).attr("dbname");
                var v2 = $(obj).attr("name");
                alert(v1);
                alert(v2);
            }
            
            /** JAVASCRIPT 通过当前标签属性名，获取属性的值 */
            function attrsByJs(obj){
                var v1 = obj.getAttribute('name');
                var v2 = obj.getAttribute('dbname');
                alert(v1);
                alert(v2);
            }
            
            function attrsButtons(obj){
                var v = obj.getAttribute('name');
                var vv = $(obj).attr("myname");
                alert(v);
                alert(vv);
            }
            
        </script>
    </head>
    <body>
        <div>
            <div style="width: 100px;height: 30px;float:left; margin-left:30px;" name="this is name feild" dbname="oracle1" onclick="attrsByJs(this)">JavaScript</div>
            <div style="width: 100px;height: 30px;float:left; margin-left:30px;" name="this is name feild" dbname="oracle2" onclick="attrsByJquery(this)">Juqery</div>
            <input type="button" name="abcdeg" myname="this is my name" onclick="attrsButtons(this)" value="buttons">
        </div>
    </body>
</html>

window.getComputedStyle(obj)["属性名"]

用来获取标签的属性，对内联式有效。

Js与标签属性的更多相关文章

  1. html页面中插入html的标签,JS控制标签属性

    html页面中插入html的标签 方法1: 使用标签: <textara> </textara>标签 方法2: 使用JS: document.getElementById(&q ...

  2. Vue.js自定义标签属性并获取属性，及绑定img的src属性的坑

    一.定义属性: 一般定义属性都是为了动态的去获取属性的值,或者动态的设置属性的值,如果想仅仅是设置一个普通的属性,直接在便签上设置属性即可,就像使用html的title.name等属性一样,如< ...

  3. 关于在JS中设置标签属性

    Attribute 该属性主要是用来在标签行内样式,添加.删除.获取属性.且适用于自定义属性. setAttribute("属性名",属性值“”):这个是用来设置标签属性的: re ...

  4. JS 获取元素、修改元素/css样式/标签属性、简单事件、数据类型

    基本使用 写在Script 标签里 引入外部js文件:<script src=" "></script> console.log(" " ...

  5. js拼接url以及为html某标签属性赋值

    记录 js拼接url 比如有些时候我们需要为某按钮实现跳转,可以利用下面的方式做到: function ReturnIndex() { var rex = RegExp("tools&quo ...

  6. html标签属性（attribute）和dom元素的属性（property）

    简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...

  7. JS中style属性

    解决办法:1.先定义一个CSS规则,然后this.className=''2.document.getElementByIdx_x("a").style.cssText=" ...

  8. HTML---引入css,js | 常用标签示例

    一.前端基础包括哪些?如何理解 二.css,js引入_及head中其他标签 三.特殊符号 四.常见的标签 4.1,form表单 4.2,input系列(单选框.复选框.input传文件.重置) 4.3 ...

  9. Html 改变原有标签属性

    内容简要: 当标签内内容 达到某以条件的时候改变当前标签属性 例如原标签为<tr> 当tr内的值符合某一条件时把<tr>变成<a>标签 例:当订单状体编程已支付的时 ...

随机推荐

  1. 实践作业3：白盒测试----简单介绍被测系统DAY4

    本次被测软件是高校学生信息管理系统,和上次黑盒测试选用一样的系统,这样做的好处在于我们对系统比较熟悉,而且可以更好的比较黑盒测试与白盒测试的区别,采用MySQL Workbench 6.3,在MyEc ...

  2. 编写高质量代码改善C#程序的157个建议——建议4： TryParse比Parse好

    建议4: TryParse比Parse好 如果注意观察除string外的所有基元类型,会发现它们都有两个将字符串转型为本身的方法:Parse和TryParse.以类型double为例,这两个方法最简单 ...

  3. 20169219《移动平台开发实践》移动APP设计应该考虑到的问题

    1.开发流程包括: (1)用户需求分析 (2)产品原型设计 (3)UI视觉设计 (4)APP开发 (5)项目测试 (6)发布 App开发经过UI设计完成之后,便会进入开发阶段. (1)服务器端:编写接 ...

  4. Android使用Canvas画图

    1.参考:http://blog.csdn.net/rhljiayou/article/details/7212620/ 2.常用方法: 1.Canvas类 drawArc 绘制弧 drawBitma ...

  5. Socket网络通讯

    网络编程 使用C#进行网络编程时,通常都需要用到System.Net命名空间.System.Net.Sockets命名空间和System.Net.Mail命名空间: 1. System.Net命名空间 ...

  6. C# 继承（3）

    接上章代码: class NameList { public NameList() => Console.WriteLine("这个是NameList的构造函数"); ~Na ...

  7. 「CF622F」The Sum of the k-th Powers「拉格朗日插值」

    题意 求\(\sum_{i=1}^n i^k\),\(n \leq 10^9,k \leq 10^6\) 题解 观察可得答案是一个\(k+1\)次多项式,我们找\(k+2\)个值带进去然后拉格朗日插值 ...

  8. django中博客后台将图片上传作为用户头像

    添加上传目录 # 如果不添加上传目录,仍然可以上传成功,默认为project目录,如果models.py定义了upload_to="目录名称",则会上传到"project ...

  9. 【bzoj4811】[Ynoi2017]由乃的OJ 树链剖分/LCT+贪心

    Description 给你一个有n个点的树,每个点的包括一个位运算opt和一个权值x,位运算有&,l,^三种,分别用1,2,3表示. 每次询问包含三个数x,y,z,初始选定一个数v.然后v依 ...

  10. 洛谷P3358 最长k可重区间集问题（费用流）

    传送门 因为一个zz错误调了一个早上……汇点写错了……spfa也写错了……好吧好像是两个…… 把数轴上的每一个点向它右边的点连一条边,容量为$k$,费用为$0$,然后把每一个区间的左端点向右端点连边, ...