js动态添加样式

js动态添加样式

  • uniapp动态添加样式
      • 动态添加class
      • 动态添加style
      • 动态添加img
  • JQuery动态添加样式
      • 动态添加css
      • 动态添加class

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>

你可能感兴趣的:(jquery,javascript)