vue 和 js 获取 dom节点下的某个元素，然后设置样式

vue获取dom节点下的类名，然后修改样式

<div ref="divRef"><div class="a">提到岁月，你们总说它是长河，流得头也不回。</div><div class="a">少不更事的年纪，我也用过老成口气，念过孔夫子的，逝者如斯乎，不舍昼夜。</div><div class="b">而今扭头过去看，才觉得如此可笑。</div><div class="d">如果没有你的话，那些都是真理，可是你来了，那些就是伪句。</div><div class="e">时光如滞，时光如滞啊。因为，那年遇到了你，我就被留在了那里。岁月知我，你不知</div>
</div><script>
export default {mounted(){this.getDom();},methods:{getDom(){let dom = this.$refs.divRef;let children = dom.children;for (let i = 0; i < children.length; i++) {if (children[i].className == "a") {children[i].style.color = 'red';} else {children[i].style.color = 'blue';}}}}
}
</script>

运行结果：

js获取dom节点下的类名，然后修改样式

 <div><div class="a">或许，人生的每一次蜕变，都是触目惊心的。</div><div class="b">瞬间的美丽总会是发生得太突然，好比是看一场电影，那些与你接踵摸肩的陌生人</div><div class="b">也算是人海茫茫中的一叶</div><div class="c">然而他们能与你共度一段时光、感受同一片天空、</div><div class="d">同一片视野的快乐，也是缘分的因缘吧!</div>
</div><script>
export default {mounted(){this.getDom();},methods:{getDom(){//第一种 获取指定某个 类名document.querySelector('.a').style.color = 'red';//第二种 获取所有类名集合的第一个（性能好于第三种）document.querySelectorAll('.b')[0].style.color = 'blue';//第三种 获取所有类名集合的第一个document.getElementsByClassName('c')[0].style.color = 'green';}}
}
</script>

运行结果：

vue 和 js 获取 dom节点下的某个元素，然后设置样式相关推荐

JavaScript 技术篇-js获取dom节点、html标签自定义属性的值。
id.name 等属性通过 e.id e.name 可以直接获取到. 但是自定义属性比如fieldname就不能直接获取到了. 用 getAttribute("属性名") 就可以了 ...
JS获取id节点修改属性和元素
<html><head><meta charset="utf-8"><title></title></head&g ...
使用jquery获取指定id下面的div元素个数
使用js获取指定id下面的div元素个数 html代码 js代码 html代码 <div id="question" > <div class="div ...
Vue的基础认知二---vue的双向绑定/vue获取DOM节点
在这篇博文之前,我们已经开了一个vue的头了,需要的小伙伴可以点击这个链接:Vue的基础认知一-构建环境/v指令的使用,好了,我们继续来看我们接下来要看的内容. 一.vue的双向绑定 mvvm框架: ...
[vue] vue怎么获取DOM节点？
[vue] vue怎么获取DOM节点? 1.document.getElementById("id")2.this.$refs.xx还有一些特殊的,比如this.$root.thi ...
JavaScript 技术篇-js通过xpath获取dom节点，js校验xpath唯一性
document.evaluate() 就是通过 xpath 获取 dom 节点. 返回的结果通过 .iterateNext() 可以获得 dom 对象,每次调用会少一个,当没有时就返回空. 返回匹配 ...
JS获取子节点、父节点和兄弟节点的方法实例总结
本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 1. 通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名 ...
JS获取子节点、父节点和兄弟节点的方法
一.js获取子节点的方式 1. 通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名字.getElementsByTagName是一个方法.返回的是一个数组.在访问的时候要 ...
js获取父子节点、兄弟节点
一.js获取子节点通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名字.getElementsByTagName是一个方法.返回的是一个数组.在访问的时候要按数组的形式 ...

vue 和 js 获取 dom节点下的某个元素，然后设置样式

vue获取dom节点下的类名，然后修改样式

js获取dom节点下的类名，然后修改样式

vue 和 js 获取 dom节点下的某个元素，然后设置样式相关推荐

最新文章

热门文章