.width

by Kim Ara

HTML

<p id="getp">boax1</p>
<p id="getd">boax2</p> 
<p id="getw">boax3</p> 
<div></div>
  
<span id="getp2">boax01</span>
<span id="getd2">boax02</span> 
<span id="getw2">boax03</span> 
<div class="test2"></div>

CSS

p { width:200px; height:50px;margin:5px; background:red; cursor:pointer; }
span { display:inline-block;width:200px; height:50px;margin:5px; background:blue; cursor:pointer; }

JavaScript

$(document).ready(function(){

  $("p").on('click', function () {
    $(this).width(100) .css({cursor:"auto", "background-color":"pink"});
  });

  function showWidth(ele, w) { 
    $("div").text("The width for the " + ele + " is " + w + "px.");
  } $("#getp").click(function () { 
    showWidth("paragraph", $("p").width());
  }); $("#getd").click(function () { 
    showWidth("document", $(document).width()); 
  }); $("#getw").click(function () {
    showWidth("window", $(window).width()); 
  });



  $("span").on('click', function () {
    $(this).height(150) .css({cursor:"auto", "background-color":"red"});
  });

  function showHeight(ele, h) { 
    $("div.test2").text("The Height for the " + ele + " is " + h + "px.");
  } $("#getp2").click(function () { 
    showHeight("paragraph", $("span").height());
  }); $("#getd2").click(function () { 
    showHeight("document", $(document).height()); 
  }); $("#getw2").click(function () {
    showHeight("window", $(window).height()); 
  });
});