CSS动态样式---基础-控制是否添加CSS类

功能：三个背景框，点击按钮添加CSS属性，再次点击去除CSS属性。

比如，我想实现只有点击这个元素时才添加这个red类，再次点击时移除red类，为了实现这个功能，需要在Vue实例内添加data属性，以便和模板代码建立联系。attachRed默认false，即默认不添加，点击方框时，需要对attachRed取反，为了按照指定条件添加CSS类，需要用 :class绑定到class属性，即时已经添加了demo这个class属性也无妨，这里的“：class”用的是Vue语法，不再使用HTML元素本身的class属性，它确实是与class属性绑定，而Vue在背后把这些语句合并为一个class对象，所i这里需要传入一个JavaScript对象，着就是Vue要获取的参数，在这个对象里，键应该是下要添加的CSS类名，值用来控制是否添加CSS类，应该是true或者false，在这里我要添加CSS类red，直接写red即可，也可以带上单引号，如果类中包含特殊字符，就必须带上单引号。然后查看效果，点击方框时，背景在红灰之间切换。这一行代码把CSS类red作为键名，引用这里的CSS代码，然后与attachRed联系到一起，鼠标点击可以让attachRed不断在true和false之间切换。

转载于:https://blog.51cto.com/13577938/2338616

CSS动态样式---基础-控制是否添加CSS类相关推荐

平台全局 css代码,css全局样式基础代码(示例代码)
简介这篇文章主要介绍了css全局样式基础代码(示例代码)以及相关的经验技巧,文章约900字,浏览量402,点赞数4,值得参考! body{ font-size:12px; font-family:&q ...
CSS(网页样式语言)基础,网页CSS设计样式基础知识点小白教程
什么是CSS? CSS由哈坤·利在1994年提出,到1996年正式完成了CSS语言,并且在1998年收录到W3C组织. CSS(Cascading Style sheet),用于控制网页样式,并允许将 ...
如何通过jQuery动态设置元素CSS的样式，以及HTML中CSS “内联式”、“嵌套式”、“外联式”使用方法
html元素使用CSS渲染标签的样式,可以通过内联式.嵌套式.外联式来将CSS样式添加到html中.有时候涉及到动态的参数,或者在事件中需要修改不同元素的CSS样式时,可以通过js获取目标元素,再其修 ...
html 点击增加样式,js点击添加css样式 css添加jq点击事件 JavaScript点击增加css样式...
js可实现点击后对div或者其他标签增加或者删除css样式,从而达到实现点击触发某种效果的目的.页面样式可以通过style修饰,也可以通过css修饰,改变css或者添加css可以改变页面的排版.代码如 ...
如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...
css 动态rem_【面试题】CSS知识点整理(附答案)
目录伪类和伪元素实现固定宽高比(width: height = 4: 3)的div,怎么设置 CSS选择器 CSS解析规则 flex: 1 完整写法 display: none和 visibili ...
css原生样式支持,原生JS读写CSS样式的方法
通过Element对象的getAttribute().setAttribute().removeAttribute()直接读写style属性如:elm.setAttribute('style','c ...
css折叠样式（1）——使用css样式的三种方式
一.css的声明标签是告诉浏览器应该是用什么形式去解析你,一般为:<!DOCTYPE html> 因为html5支持向下兼容,详细可看上图. 二.css样式的使用方式: (1)内链样式表 ...
css 动态rem_css布局简史与第四代css布局技术
一转眼已经2019年,前端行业也风风雨雨的走过了10多年,网页布局也从最原始的文档变成成了当前精彩纷呈的交互.当我看到第四代css布局技术网格布局的时候,就像我看到无数女神一样的反应,美女我们好像在哪 ...
CSS特殊样式（三）纯CSS实现各类气球泡泡对话框效果
一.关于纯CSS实现气泡对话框首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一点图片都没有哦.看到这里,你是不是跟我一样 ...

CSS动态样式---基础-控制是否添加CSS类

CSS动态样式---基础-控制是否添加CSS类相关推荐

最新文章

热门文章