Vue 之 获取并修改元素样式（比如案例取色器的实现）

Posted 2021-12-17 zhuangwei_8256

Vue 之 获取并修改元素样式（经典案例取色器）

• • 一、利用原生 js
  • 二、利用 Vue的 `v-bind` 指令和 `ref` 属性

一、利用原生 js

利用相关dom api 取到元素（如果你的项目中引入了 jQuery，也可以使用 jq 的 api ），这里使用的是原生的；

注：

1. 如果你使用的是单个样式修改的是带中横线的样式属性（如 margin-top），那么代码中的样式需要修改成驼峰格式的（如 marginTop ）；多个样式的写法可使用模板字符串（反引号），使用模板字符串的写法不用将中横线的样式属性改成驼峰格式，且可进行代码换行;
2. 如果你使用的是class，因为 class 定义的不是唯一性，所以存在多个的情况，取到的值是一个数组，那么你取值或者赋值的时候需要找到对应的那个元素，这个自行打开控制台查找（最好使用唯一的class，这样默认就是 [0]，id 的话就不存在这个情况）；
3. 这种方式只支持行内样式。

选其一即可

• 利用 id

// 单个样式
document.getElementById('xxx').style.color
// 多个样式
document.getElementById('xxx').style.cssText 

• 利用 class

// 单个样式
document.getElementsByClassName('xxx')[0].style.color
// 多个样式
document.getElementsByClassName('xxx')[0].style.cssText

• 示例

单个样式：

let oldBoxColor = document.getElementsByClassName('oldBox')[0].style.color;
document.getElementsByClassName('newBox')[0].style.color = oldBoxColor;

多个样式：

document.getElementsByClassName('newBox')[0].style.cssText = `
	background-color: #ccc;
	color: blue;
`;

 
 
 

二、利用 Vue的 v-bind 指令和 ref 属性

 

<div id="app">
    <div class="oldBox" ref="oldBox" style="color: #ccc;">oldBox</div>
    <br>
    <div class="newBox" ref="newBox" :style=" color: selectedColor " @click="getOldBoxColor">newBox</div>
</div>

 

注：这种方式同样只支持行内样式，通过 ref 值和原生 js 的写法本质上是一样的；

let vm = new Vue(
    el: '#app',
    data()
        return 
            selectedColor: ''
        
    ,
    methods: 
        getOldBoxColor() 
        	// 这两种写法都能实现
            // this.selectedColor = this.$refs.oldBox.style.color; // 第一种写法
            this.$refs.newBox.style.color = this.$refs.oldBox.style.color; // 第二种写法
        
    
);

 
另：

1. 如果需要通过动态切换 js变量来切换元素绑定的 class类名，达到元素样式的变化也可；只是这种情况需要先写好各自类型对应的样式，看实际需求而定；
2. 多个样式的写法同原生 js，可参考上面的描述。

 
 
 

如有不足，望大家多多指点！ 谢谢！