精华内容
下载资源
问答
  • 原生Js通过class属性值获取对象

    万次阅读 2016-01-04 15:03:31
    原生Js通过class属性值获取对象 window.onload = function(){ console.log(getElementByClassName("tag").length); console.log(getElementByClassName("tag")); } function getElementByClassName(classnames){ ...
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>原生Js通过class属性值获取对象</title>
    <script type="text/javascript">
    window.onload = function(){
    	console.log(getElementByClassName("tag").length);
    	console.log(getElementByClassName("tag"));
    }
    function getElementByClassName(classnames){ 
    	var objArray= new Array();//定义返回对象数组
    	var tags=document.getElementsByTagName("*");//获取页面所有元素
    	var index = 0;
    	for(var i in tags){
    		if(tags[i].nodeType==1){
    			if(tags[i].getAttribute("class") == classnames){ //如果某元素的class值为所需要
    				objArray[index]=tags[i];
    				index++;
    			} 
    		} 
    	} 
    	return objArray;
    }
    </script>
    </head>
    <body>
    	<div class="tag nav" ></div>
    	<div class="tag" ></div>
    </body>
    </html>

    测试结果如下:

    1
     [div.tag]


    结论:目前方法仅仅可以获得class的属性值唯一的那个对象

    展开全文
  • 22 H5原生JS获取元素class属性值及操作 前面说到每一个预定义属性都有一个property与之对应。因为class是关键字因此attribute对应的property名称为className,通过className我们可以获取到元素class的属性值。 1...

    22 H5原生JS获取元素class属性值及操作

        前面说到每一个预定义属性都有一个property与之对应。因为class是关键字因此attribute对应的property名称为className,通过className我们可以获取到元素class的属性值。

    1 获取class的属性值

    示例

    	<head>
    		<meta charset="UTF-8">
    		<title>01_H5原生JS获取元素class属性值及操作</title>
    	</head>
    	<body>
    		<div id="test" class="test1 test2 test3"></div>
    		<script type="application/javascript">
    			var divNode = document.querySelector("#test");
    			console.log(divNode.className);
    		</script>
    	</body>

    效果

    2 操作class属性值

        因为通过property属性获取到class属性值是字符串,操作起来特别不方便。因此H5提供了另一个属性classList,用于获取class属性值及操作class属性值。该方法返回一个数组。

    示例

    	<head>
    		<meta charset="UTF-8">
    		<title>02_H5原生JS获取元素class属性值及操作</title>
    	</head>
    	<body>
    		<div id="test" class="test1 test2 test3"></div>
    		<script type="application/javascript">
    			debugger
    			var divNode = document.querySelector("#test");
    			// 添加
    			divNode.classList.add("test4");
    			// 删除
    			divNode.classList.remove("test2");
    			// 存在则删除,不存在则新增
    			divNode.classList.toggle("test1");
    			divNode.classList.toggle("test5");
    		</script>
    	</body>

    效果

     

     

     

    展开全文
  • 1.用JS修改标签的 class 属性值class 属性是在标签上引用样式表的方法之一,它的值是一个样式表的选择符,如果改变了 class 属性的值,标签所引用的样式表也就更换了,所以这属于第一种修改方法。更改一个标签的 ...

    用JavaScript修改CSS属性 只有写原生的javascript了。

    1.用JS修改标签的 class 属性值:class 属性是在标签上引用样式表的方法之一,它的值是一个样式表的选择符,如果改变了 class 属性的值,标签所引用的样式表也就更换了,所以这属于第一种修改方法。

    更改一个标签的 class 属性的代码是:

    document.getElementById( id ).className = 字符串;

    document.getElementById( id ) 用于获取标签对应的 DOM 对象,你也可以用其它方法获取。className 是 DOM 对象的一个属性,它对应于标签的 class 属性。字符串 是 class 属性的新值,它应该是一个已定义的CSS选择符。

    利用这种办法可以把标签的CSS样式表替换成另外一个,也可以让一个没有应用CSS样式的标签应用指定的样式。

    举例:

    .txt {

    font-size: 30px; font-weight: bold; color: red;

    }

    欢迎光临!

    更改样式

    function setClass()

    {

    document.getElementById( "tt" ).className = "txt";

    }

    2.用JS修改标签的 style 属性值:style 属性也是在标签上引用样式表的方法之一,它的值是一个CSS样式表。DOM 对象也有 style 属性,不过这个属性本身也是一个对象,Style 对象的属性和 CSS 属性是一一对应的,当改变了 Style 对象的属性时,对应标签的 CSS 属性值也就改变了,所以这属于第二种修改方法。

    更改一个标签的 CSS 属性的代码是:

    document.getElementById( id ).style.属性名 = 值;

    document.getElementById( id ) 用于获取标签对应的 DOM 对象,你也可以用其它方法获取。style 是 DOM 对象的一个属性,它本身也是一个对象。属性名 是 Style 对象的属性名,它和某个CSS属性是相对应的。

    说明:这种方法修改的单一的一个CSS属性,它不影响标签上其它CSS属性值。

    举例:

    div id="t2">欢迎光临!

    展开全文
  • JavaScript 删除class属性

    千次阅读 2019-04-01 21:14:46
    本文介绍一下利用JavaScript删除元素的class属性。...删除class属性值中的某一个类。 一.删除class属性: <!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScr...

    本文介绍一下利用JavaScript删除元素的class属性。
    考虑范围更广一些,可以包括如下两个操作:
    (1).删除class属性。
    (2).删除class属性值中的某一个类。
    一.删除class属性:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JavaScript 删除class属性</title>
    <style>
    #ant{
      width:120px;
      height:50px;
      background-color:#ccc;
    }
    .a{color:red;}
    </style>    
    <script>
    window.function(){
      let odiv=document.getElementById("ant");
      let obt=document.getElementById("bt");
      obt.function(){
        odiv.removeAttribute("class");
      }
    }
    </script>
    </head>
    <body>
      <div id="ant" class="a">51前端</div>
      <input type="button" id="bt" value="查看效果"/>
    </body>
    </html>
    

    运行结果:点击按钮可以删除div的class属性可以看到,元素的class属性已经被彻底删除。
    在这里插入图片描述在这里插入图片描述
    二.删除class属性值中的指定类:
    假设div元素的class属性值为"a b",下面要删除b。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JavaScript 删除class属性</title>
    <style>
    #ant{
      width:120px;
      height:50px;
      background-color:#ccc;
      text-align:center;
    }
    .a{color:red;}
    .b{line-height:50px;}
    </style>    
    <script>
    window.function(){
      let odiv=document.getElementById("ant");
      let obt=document.getElementById("bt");
      obt.function(){
        odiv.classList.remove("b");
      }
    }
    </script>
    </head>
    <body>
      <div id="ant" class="a b">51前端</div>
      <input type="button" id="bt" value="查看效果"/>
    </body>
    </html>
    

    运行结果:点击按钮可以删除样式类"b"。
    如果要删除多个样式类,为remove方法传递多个参数即可,用逗号分隔。
    在这里插入图片描述在这里插入图片描述
    3、删除class属性中的某个属性
    以tab切换为例:

    在写tab切换的时候,通常我们会给选中的tab设置不同的样式,常用的方法是给被选中的tab新增一个class名,然后改这个class名的样式。
    比如 起一个class名叫“active”
    设置样式

    .active{
        color: #FFD113 !important;
    }
    

    在html代码中给首页(默认选中)加上class名active

    <a class="tab_item active">
        <span class="iconfont icon-shouye"></span>
        <span class="tab2">首页</span>
    </a>
    

    效果是这样的:
    在这里插入图片描述
    在点击切换的过程中,我们需要给被选中的子选项添加“active”,然后让其它子选项删除“active”名
    在这里插入图片描述
    其中:根据id名字获得class属性,someClassName指class属性中的一个值,把someClassName重新置为" ",然后重新给id复制class属性。即可实现删除class属性其中的一个值。当然添加和替换是同样的思想方法。

    展开全文
  • JavaScript给元素添加class属性

    万次阅读 2019-04-27 21:00:02
    注意:element.classList.remove()、element.classList.add() — ie9及以下不兼容 // 移除div的class属性 ...// 添加class属性值 // 方式一 obj.className += 'new active'; // 方式二 // obj.className =...
  • 主要介绍了js获取某元素的class里面的css属性值代码,有需要的朋友可以参考一下
  • javascript操作class属性

    千次阅读 2011-11-14 10:49:39
    在交互性较强的Web应用中,经常需要动态更改指定元素的属性值,假设变量e是页面中一个元素的引用,根据W3C DOM标准,可以在JavaScript中使用e.getAttribute('属性名')来取得属性的值,并且用e.setAttribute('属性名'...
  • JS修改class属性

    千次阅读 2019-05-13 00:43:11
    DOM里的每个节点上都有一个classList对象,既可以用里面的方法新增、删除、修改节点上的CSS类。也可以用它来判断某个节点是否被赋予了某个CSS类。 add(类名) 添加类名 remove(类名) 删除类名 replace(替换谁,替换...
  • element.classList.add('classone','classtwo',···); // 2 删除一个或多个类名 element.classList.remove('classone','classtwo',···); // 3 检索该类里是否有哪个类名 element.classList.indexOf('...
  • js修改html中class属性

    万次阅读 2016-10-22 01:05:11
    用到js修改html的class属性值,归纳总结下: 一、获取class属性值 var value = $("div").attr("class"); //这里获取class属性值 var array=val.split(" "); //把class值用空格分开,通过数组获取每个值 二、更改...
  • 这篇文章主要介绍了js获取某元素的class里面的css属性值代码,有需要的朋友可以参考一下 用js如何获取div中css的 margin、padding、height、border等。你可能说可以直接用document.getElementById("id").style....
  • js动态修改class属性

    千次阅读 2020-06-18 10:34:07
    js动态修改class属性 在前端界面,希望通过点击修改class属性,实现代码如下: $(function(){ $("#selected li").click(function() { $(this).siblings('li').removeClass('active'); // 删除其他li元素的样式 $...
  • 1、JS运用ID得到其他的属性值 document.getElementsById("ID值").getAttribute("所得属性名称"); 2、JS运用ID改变其他属性及ID的值 document.getElementById("ID值").getAttribute("所改变属性的名称","改变后的值")...
  • js多个class属性的标签赋值

    千次阅读 2017-12-25 09:33:44
    根据ID标签赋value,document.getElementById("id").value="张三";当有多个class属性时,for(var i=0;i;i++){ document.getElementsByClassName("name")[i].value="李四"; }
  • 目的:根据data中you的数据来判断,用什么颜色.you为trueclass=nihao;反之class=nihao12 js中代码(data数据) Page({ /** * 页面的初始数据 */ data: { you:0 } }) wxml中 &lt;view class=&...
  • 原生JS给元素添加class属性

    千次阅读 2017-08-04 10:24:00
    有下面这三种简单语句。...一般情况下最好是单独把javascript放在js文件里,通过head里的 src="file.js">链接起来,css则是通过。这样做的目的是为了让内容-样式-逻辑分离,以便以后能够更好地维护。  
  • js获取某元素的class里面的css属性值

    千次阅读 2014-01-16 16:54:34
    js获取某元素的class里面的css属性值代码。   用js如何获取div中css的 margin、padding、height、border等。你可能说可以直接用document.getElementById("id").style.margin获取。但是你说的只能获取直接在标签中...
  • 获取标签中的class属性

    千次阅读 2019-08-13 10:07:58
    我遇到了一个小问题,就是怎样获取标签内的class属性值,于是乎我就测试了几个我能想到的方法,写了下来供自己查看,在这里也和大家分享一下。 DOM对象和jQuery对象: <!DOCTYPE html> <html> <...
  • jsclass添加和删除

    2018-12-03 16:05:41
    // 根据id为class添加属性值 document.getElementById("index").classList.add("active"); // 根据id为class删除属性值 document.getElementById("index").classList.remove("...
  • vue绑定class属性

    2020-03-05 13:08:52
    4、直接传入一个对象,对象的属性是类名 < h1 :class = " {red:false, thin:true, active:flag} " > 我是一个字符串 h1 > 5、在js中定义对象 < h1 :class = " classVal " > 我是一个字符串 h1 > js...
  • 假设有一个标签h5, 我们它添加了一个自定义属性值,(item.id是从动态添加的) 点击h5 标签,如何才能获取当前对应的自定义属性值呢? 想当然的我最开始这样写: <h5 class=left click='getDataId' data-id=item...
  • js根据class属性获取所有标签

    万次阅读 2017-12-11 13:15:42
    //获取所有的class的元素  function getClass(tagName, className) //获得标签名为tagName,类名className的元素  {  if (document.getElementsByClassName) //支持这个函数  {  return document.getEleme
  • js获取css属性值

    万次阅读 2018-03-21 16:40:59
    因为之前用惯了jq来获取和设置css属性,然后在做demo不使用jq的情况下,竟然在这一点上碰到了问题,然后就自个搜了搜为什么,在查看了很多文档和博客之后才终于搞明白了。 &lt;style&gt; .box{ width:200...
  • JS直接修改CSS属性/id属性/class属性

    万次阅读 2017-09-01 23:12:11
    关键函数: document.createAttribute(‘style’):创建属性节点 obj.setAttributeNode(attr_node):向obj元素中添加指定的属性值 <!DOCTYPE html> 直接修改style属性 <style>
  • vue.js动态绑定class属性

    万次阅读 2018-05-30 15:50:18
    以下介绍几种在vuejs中,动态绑定class的方法: 1.使用 class = "{{ className }}"... 的方式绑定class,此时class-a先在data里初始化,在别的地方可修改classA的。//HTML代码: &lt;div :c...
  • 1、vue.js组件标签中,可以用 :class=“xxx”来绑定样式,xxx就是vue实例的data中定义的变量,通过双向绑定赋值; 2、这里记录的是另外几种实现方式: 2-1 :class="'img'" 这种写法直接查找img的class样式,不再在...
  • js通过class获取标签里面的内容——看源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p ...
  • JS获取标签属性值

    千次阅读 2015-10-14 15:54:07
    在实际开发中,需要一些标签自定义一些属性,而这些标签本身是不包含这些属性的,这时通过一下JS来获取该属性值。 111 $(document).ready(function(){ $(".statistics a").click(function(){ ...
  • button class="c-btn query">查询</button> 方法1: $('.c-btn.query').click(function () { query(); } 方法2: $("body").on('click','.c-btn.query',function () { query(); }); 方法1有时候不奏效...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 325,620
精华内容 130,248
关键字:

js怎么给class属性的值