博客列表 >jQuery关于attr()、css()以及width、height、positon等知识的学习-2018年4月6日下午6:15完成

jQuery关于attr()、css()以及width、height、positon等知识的学习-2018年4月6日下午6:15完成

邵军-山东-84918的博客
邵军-山东-84918的博客原创
2018年04月06日 18:18:53994浏览

css() attr()代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>attr()及css()的学习</title>
</head>
<body>
       <img  src="http://p1.so.qhmsg.com/t01fefeafb1d03a3a46.jpg" alt="美女" width="200" style="border-radius: 50%;">
        <br>
       <button id="n1" type="button">增大</button>
       <button id="n2" type="button">变小</button>
       <button id="n3" type="button">还原</button>
       <button id="n4" type="button">更换</button>
       <button id="n5" type="button">增加阴影</button>
       <button id="n6" type="button">改变按钮样式</button>

    </body>
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
$("#n1").click(function(){
    $("img").attr("width","400px")
})
$("#n2").click(function(){
    $("img").attr("width","100px")
})
$("#n3").click(function(){
    $("img").attr("width","200px")
})
$("#n4").click(function(){
    $("img").attr("src","http://p0.so.qhimgs1.com/bdr/326__/t01fb33b1a4437ba3ac.jpg")
})
$("#n5").click(function(){
    $("img").css("box-shadow","2px 2px 5px #666")
})
$("#n6").click(function(){
    $("button").css({"backgroundColor":"red","color":"white"})
})


    </script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

width() height() position()等知识的学习:

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>width及height的学习</title>
</head>
<body>
<div id="div1" style="height:200px;width:300px;padding:0;margin:0;border:1px solid orange;background-color:#A566F4;"></div>
<button id="but1" type="button">显示尺寸</button>
<button id="but2" type="button">位置偏移</button>
<button id="but3" type="button">位置尺寸</button>

</body>
 <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
 <script type="text/javascript">
      $("#but1").click(function() {
          var txt=""
          txt+="宽度是:"+$("#div1").width()+"px"+"\n"+"高度是:"+$("#div1").height()+"px"
          alert(txt)

      })
      $("#but2").click(function() {
          $("#div1").offset({top:200,left:200})
      })
      $("#but3").click(function() {
         txt=$("#div1").position()
         alert("顶部位置:"+txt.top+"\n"+"左部位置:"+txt.left)
      })
 </script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手写内容:        

IMG_20180406_180809_看图王.jpg





声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议