JQUERY操作css与css()方法、获取设置尺寸；

一、jQuery addClass() 方法

向不同的元素添加 class 属性。在添加类时，您也可以选取多个元素

 

<style>
.aa
{
    color:red;
};


</style>
<body>

<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>

<button>给元素添加class属性</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("aa");//把上面的class属性aa,添加给“h1/h2/p”
    
  });
});
</script>

 

 

 

 

二、jQuery removeClass() 方法

<style>
.aa
{
    color:red;
};


</style>
<body>

<h1 class="aa">标题 1</h1>
<h2 class="aa">标题 2</h2>
<p class="aa">这是一个段落。</p>

<button>给元素移除class属性</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").removeClass("aa");//给“h1/h2/p”移除aa属性
    
  });
});
</script>

 

三、jQuery toggleClass() 方法：被选元素进行添加/删除类的切换操作

<style>
.aa
{
    color:red;
};


</style>
<body>

<h1 class="aa">标题 1</h1>
<h2 class="aa">标题 2</h2>

<button>切换</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2").toggleClass("aa");//给“h1/h2/p”切换aa属性
    
  });
});
</script>

 

       

 

四、jQuery css() 方法

设置多个 CSS 属性

<body>

<p style="background-color:#ff0000">这是一个段落。</p>

<button>切换</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
   $("button").click(function(){
    $("p").css({"background-color":"yellow","font-size":"200%"});  
  });
});
</script>

 

 

 

 

尺寸：

jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

posted @ 2016-12-24 19:52  88旧港  阅读(302)  评论(0)  编辑  收藏  举报