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之间切换。

原文地址：http://blog.51cto.com/13577938/2338616

时间： 2024-10-05 09:23:23

CSS动态样式---基础-控制是否添加CSS类的相关文章

css折叠样式（1）——使用css样式的三种方式

一.css的声明标签是告诉浏览器应该是用什么形式去解析你,一般为:<!DOCTYPE html>  因为html5支持向下兼容,详细可看上图. 二.css样式的使用方式: (1)内链样式表: demo.html <!DOCTYPE html> <html> <head>     <title>内链样式使用</title>     <meta charset="utf-8"> </head>

css动态样式

一种 var link=document.createElement("link"); link.rel="stylesheet"; link.type="text/css"; link.href="styles.css"; var head=getElementByTagName("head")[0]; head.appendChild(link); 都不行的什么鬼....................

css全局样式基础代码

body{ font-size:12px; font-family:"宋体",Arial, Helvetica, sans-serif;color:#363636;background:#e5e5e5 url(../images/bpbg.jpg) center top no-repeat;}html, body, div, span, h1, h2, h3, h4, h5, h6, em, img, strong, sub, sup, tt,dd, dl, dt, form, lab

css折叠样式（4）——div+css布局

内容概要: 一.div和span (1)块级标签:div (2)内联标签:span 如图所示: 二.盒模型(重要) 注:可用浏览器的调试工具可查看盒子 (1)margin:盒子外边距 (2)padding:盒子内边距(会改变块的大小) (3)border:盒子边框宽度 (4)width:盒子宽度 (5)height:盒子高度 ①:外边距和内边距区别: demo.html <!doctype html> <html> <head> <title>Div+Css

动态样式语言Sass&amp;Less介绍与区别

一. Sass/Scss&Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写,而且更容易阅读.Sass语法类似与Haml,属于缩排语法(makeup),用意就是为了快速写Html和Css. Less一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (

动态为页面添加CSS样式文件引用

动态为页面添加CSS样式文件引用: 1 if (document.createStyleSheet) { //IE 2 document.createStyleSheet("./Themes/Default/MessageTip.css"); 3 } 4 else { //Firefox, Chrome 5 var stylesheet = document.createElement("link"); 6 stylesheet.href = "./The

javascript动态添加css样式

查看demo:http://koringz.github.io/addcssstyle/ css的cssstylesheet方法有哪些属性和方法,首先我们是console.log(style.sheet). 当我们知道了style具有这些方法的时候,我们可以用一个函数输出一次获得的css属性方法. function addCss () { var sty = document.createElement('style'); var h2 = document.getElementsByTagNa

用Jquery动态append方式加入标签时Css样式丢失的解决方法

一般在Jquery中会用下面的方式来添加新标签: var obj = "<fieldset data-role='controlgroup' data-type='vertical' data-role='fieldcontain'> <input id='menu0" type='checkbox'/><label for='menu0'> 复选框 </label> </fieldset>";  //按个人要求拼接

深入理解脚本化CSS系列第五篇——动态样式

前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比如动态样式就相对较复杂 所谓动态样式,是指在页面加载时并不存在,在页面加载完成后动态添加到页面的样式 动态样式包括两种情况:一种是通过<link>元素插入外部样式表,另一种是通过<style>元素插入内部样式.下面将详细介绍这两种情况 外部样式 /*style.css里面的内容*/ .