定义一个css函数 样式
时间: 2023-12-24 09:08:06 浏览: 35
function css(element, property, value) {
element.style[property] = value;
}
// 使用示例
const div = document.querySelector('div');
css(div, 'color', 'red');
css(div, 'font-size', '20px');
相关问题
vue2函数动态控制css样式
在Vue2中,你可以使用条件渲染和动态类绑定来动态控制CSS样式。
条件渲染可以通过使用`v-if`或`v-show`指令来控制元素的显示与隐藏。例如,你可以根据某个条件来切换一个元素的显示与隐藏:
```html
<div v-if="isActive">我是一个可见的元素</div>
```
在上面的例子中,`isActive`是一个在Vue实例中定义的变量,根据其值来决定元素是否显示。
动态类绑定可以通过使用`v-bind:class`指令来实现。你可以根据不同的条件来为元素绑定不同的类名:
```html
<div :class="{ active: isActive, 'text-bold': isBold }">我有不同的样式</div>
```
在上面的例子中,`isActive`和`isBold`是在Vue实例中定义的变量。如果`isActive`为`true`,则`active`类将被添加到元素中;如果`isBold`为`true`,则`text-bold`类将被添加到元素中。
你还可以使用计算属性或方法来根据不同的条件动态返回类名。例如,你可以创建一个计算属性来根据某个条件返回不同的类名:
```html
<div :class="getClass">我有不同的样式</div>
```
```javascript
data() {
return {
isActive: true
}
},
computed: {
getClass() {
return this.isActive ? 'active' : 'inactive';
}
}
```
在上面的例子中,根据`isActive`的值,计算属性`getClass`将返回不同的类名。
通过这些方式,你可以根据条件来动态控制CSS样式,使得Vue组件更加灵活和可交互。
css attr函数怎么用
`attr()`函数是CSS3中的一个新特性,它可以用于获取元素属性值,并将其作为CSS样式中的值。使用`attr()`函数可以使样式更加灵活和动态。
`attr()`函数的语法如下:
```css
attr(attribute-name, [fallback-value])
```
其中,`attribute-name`表示要获取的属性名称,`fallback-value`是可选参数,表示如果获取不到属性值时的默认值。
举个例子,假设我们有一个自定义属性`data-color`,我们可以使用`attr()`函数将其作为背景颜色值:
```css
div {
background-color: attr(data-color, #ccc);
}
```
如果元素定义了`data-color`属性,则`background-color`的值将是`data-color`的值,否则将使用`#ccc`作为默认值。
需要注意的是,`attr()`函数只能在CSS属性值中使用,不能在属性名中使用。并且,一些浏览器可能不支持`attr()`函数,需要进行兼容性处理。