jquery改变css,改变style
生活随笔
收集整理的這篇文章主要介紹了
jquery改变css,改变style
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
為什么80%的碼農都做不了架構師?>>> ??
?
實例
設置 <p> 元素的顏色:
$(".btn1").click(function(){$("p").css("color","red"); } );?
實例 1
將所有段落的顏色設為紅色:
$("button").click(function(){$("p").css("color",function(){return "red";});});?
實例 2
逐漸增加 div 的寬度:
$("div").click(function() {$(this).css("width", function(index, value) {return parseFloat(value) * 1.2;}); });?
("#id").css('display','none');
$("#id").css('display','block');
或
$("#id")[0].style.display = 'none';
$("#id")返回的是JQuery
它是個集合肯定有display屬性
$("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").toggle()切換元素的可見狀態。如果元素是可見的,切換為隱藏的;如果元素是隱藏的,切換為可見的
Jquery判斷元素是否隱藏:display屬性狀態值
<style type="text/css"> .run-button{width:100px; height:38px;display:block;position:absolute;right:70%; top:200px;} .test{ width:100px; height:100px; color:#000; border:1px blue solid;} .tips{color:#f00;} </style><script type="text/javascript"> $(function(){$(".run-button").focus().click(function(){if($('.test').is(':visible')){$('.test').hide().next().text('注意:div被隱藏了!');}else{$('.test').show().next().text('div顯示,能看見');} //用基本選擇器 :hidden 也行 // if($('.test').is(':hidden')){ // $('.test').show().next().text('div顯示,能看見'); // }else{ // $('.test').hide().next().text('注意:div被隱藏了!'); // }})}) </script> <p style="padding:8px 0;">說明:多次點擊右上角按鈕,使div層在顯示 、隱藏兩者狀態間自由切換 </p> <p><input type="button" value="點擊測試" class="run-button"/> </p> <div class="test">該div默認顯示 </div> <p><span class="tips">注意:div當前顯隱藏狀態</span> </p>?
?
?
?
轉載于:https://my.oschina.net/TAOH/blog/914657
總結
以上是生活随笔為你收集整理的jquery改变css,改变style的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 怎样健身最有效?程序员们可能还需要这些…
- 下一篇: redis 基础操作学习