0、style方式添加样式

DOM对象.style.color = 'red'

DOM对象.style.display = 'block/none'			//让元素显示/隐藏

1、js动态添加样式

1、添加样式：DOM对象.className = '类名 类名' //给class属性添加类；若添加多个类名，空格隔开

2、删除样式：DOM对象.className = ''	//清空class属性里面的类

2、H5方式添加样式

1、添加类名：DOM.classList.add('类名','类名')	//add()方法，传多个参用 , 隔开

2、删除类名：DOM.classList.remove('类名')

3、切换类名：DOM。classList.toggle('类名')	//有类名，点击则删除，反之则添加

4、判断是否有类名：DOM.classList.contains('类名')	//console输出，true有类名 false没类名

3、jQuery动态添加样式

jQuery动态添加class类

1、添加类名：jQuery对象.addClass('类名')
2、删除类名：jQuery对象.removeClass('类名')
3、切换类名：jQuery对象.toggleClass('类名')

uniapp动态添加样式

动态添加class

<view 
	:class="goods_attribute.is_open ? 'preventTouchMove' : ''">
</view>

动态添加style

<view
  :style="{'color':(item.price&&item.price!=='0.00' ? '#fd6331' : ''),'border':(item.price&&item.price!=='0.00' ? '2rpx solid #fd6331' : '')}">
</view>

动态添加img

<image
  :src="item.price=='0.00' ? '../../static/images/mianfei.png' : '../../static/images/VIP.png'">
</image>

JQuery动态添加样式

动态添加css

	<script type="text/javascript">
		$(document).ready(function () {
		
			//获取屏幕宽高
			var height = $(document).height()
			var width = $(document).width()
			
			//动态添加单个样式
			$("img").css('width', width + 'px');	
			$("img").css('height', height + 'px')
			
			//添加多个样式
			$("p").css({"background-color":"blue","font-size":"14px"});
			
			var css = {
			    background-color: '#EEE',
			    height: '500px',
			    margin: '10px',
			    padding: '2px 5px'
			};
			$("div").css(css);
		});
	</script>

动态添加class

<script type="text/javascript">
	$(document).ready(function () {
	$("#two").addClass("divClass2")  //为ID为two的对象追加样式divClass2
		})
</script>

一.vue常用指令

Vue的指令是以v-开头的，作用于页面中的元素，所以需要将指令绑定与元素中，从而达到给绑定的元素添加行为的目的。

​ 语法：<元素标签 v-指令 = “表达式”>

1.v-text

用于更新标签包含的文本，它的作用跟双大括号效果是一样的。

2.v-html指令

绑定一些包含html代码的数据在视图上，例如< strong >Daisy</ strong>,这个字符包含了< strong>标签，要想< strong>不被当做普通的字符串渲染出来，发挥< strong>应有的效果，我们就得使用v-html指令 。

3.v-show

指令的取值为true/false，分别对应着显示/隐藏，例如下面这段代码，show1会被显示出来，show2会被隐藏。

4.v-if指令

取值为true/false，控制元素是否需要被渲染，例如下面代码，设置为true的

标签成功渲染出来，而设置为false的,

标签被一行注释代替了，并没有被解析渲染出来。

v-show和v-if的区别: v-if是判断是否有DOM节点, v-show是判断节点是否显示隐藏,如果需要频繁切换显示/隐藏的可以用v-show;如果运行后不太可能需要切换显示/隐藏的可以用v-if

5.v-else指令

和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来。如下图代码所示：

6.v-for指令

遍历data中存放的数组数据，实现列表的渲染。（v-for指令除了可以迭代数组，还可以迭代对象和整数）

7.v-bind指令

用于动态绑定DOM元素的属性;例如 标签的href属性，< img>标签的src属性等。v-bind可以简写成“：”

8.v-on指令

可以绑定事件的监听器。通过v-on指令修饰click点击事件，指定事件响应后的处理函数为methods中的say()方法，可简写成@ 如下所示：

9.v-model指令

用于表单输入，实现表单控件和数据的双向绑定。只要给input控件添加v-model指令，并指定关联的数据content，就可以轻松把用户输入的内容绑定在content上。

二.动态添加样式

动态添加可以采用：class 也可以采用：style

1. :class方式

2. :style方式