jQuery css

時間 2019-12-13

標籤 jquery css 欄目 JQuery 简体版

原文原文鏈接

取得第一個段落的color樣式屬性的值。$("p").css("color");

將全部段落的字體顏色設爲紅色而且背景爲藍色。$("p").css({ "color": "#ff0011", "background": "blue" });

將全部段落字體設爲紅色


$("p").css("color","red");

$("button").click(function(){
$("p").offset({top:100,left:0});
});javascript

var voffset = $("#inner").offset(); alert(voffset.left); //輸出：$("#outer").offset().left+50 alert(voffset.top); //輸出：$("#outer").offset().top+60

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    x=$("p").offset();
    $("#span1").text(x.left);
    $("#span2").text(x.top);
  });
});
</script>
</head>
<body>
<p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
<button>得到 offset</button>
</body>

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    x=$("p").position();
    alert("Left position: " + x.left + " Top position: " + x.top);
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>得到 p 元素的位置座標</button>
</body>

$(document).ready(function(){
  $(".btn1").click(function(){
    $("div").scrollTop(100);
  });
  $(".btn2").click(function(){
    alert($("div").scrollTop()+" px");
  });
});

$(document).ready(function(){
$("button").click(function(){
$("div").scrollLeft(100);
});
});css

$("p").width(20);


height:高度 
innerHeight:高度＋補白 
outerHeight:高度＋補白＋邊框，參數爲true時：高度＋補白＋邊框＋邊距

<div id="element" style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #000;"></div>


<script type="text/javascript">
var $ele = $("#element");

// height() = height(100) = 100
document.writeln( $ele.height() ); // 100

// innerHeight() = height(100) + padding(10*2)= 120 
document.writeln( $ele.innerHeight() ); // 120

// outerHeight() = height(100) + padding(10*2) + border(1*2) = 122 
document.writeln( $ele.outerHeight() ); // 122

// outerHeight(true) = height(100) + padding(10*2) + border(1*2) + margin(5*2) = 132 
document.writeln( $ele.outerHeight(true) ); // 132
</script>