search

博客列表 >4月4号juqery作业

4月4号juqery作业

小蚂蚁的博客
小蚂蚁的博客原创
2018年04月17日 12:33:35653浏览

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>内联样式css()</title>

<style type="text/css">

     .box1{

      width: 300px;

      height: 300px;

      background-color: wheat;

      position: relative;

     }

     .box2{

      width: 100px;

      height: 100px;

      background-color:lightgreen;

      position: absolute;

      top:50px;

      left: 100px;

      }

     }

</style>

</head>

<body>

<img src="../images/hg.jpg">

<div>

    <div></div>

</div>

</body>

</html>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">

  // css()和attr()类似，自带getter/setter

  // 设置样式：css(neme[,value])

//   var res =$('img').css('width','300px')

// // var  res= $ ('img').css('width',200)

//  var res =$('img').css('border-radius','10%')

//   var res =$('img').css('box-shadow','5px 5px 5px #888')


// // 链似操作

//    var res=$('img').css('width','300px')

//                     .css('border-radius','10%')

//                      .css('box-shadow','5px 5px 5px #888')




  var res=$('img').css({

   'width':'200px',

   'border-radius':'40%',

   'box-shadow':'5px 5px 5px #888'

  })


  // // 杰森改法

  //  var res=$('img').css({

  //  "width":"200px",

  //  "border-radius":"40%",

  //  "box-shadow":"5px 5px 5px #888"

  // })

   var res =parseInt($('img').css('width'))


   res+=200

   var res=$('img').css('width',res+'px')

   var res=$('img').css('width')




// height(),width()

  

  // var res=$('img').width(200)

  // var res=$('img').width('200pt')

  var res=$('img').width(200)

  // 等于43行代码

  // 

   // 增加wihdth长度

   var res=$('img').width('+=50')  

   // var res=$('img').width('width','+=50')  

  // offset()

 var res=$('img').offset()

 // 获取与上边的距离想要获得的是数值请在top后面加+px

 var res=$('img').offset().top


// position()

  var res= $('box2').position()

  var res= $('box2').position()+'px'

// 控制台输出

  console.log(res)

  </script>


实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内联样式css()</title>
	<style type="text/css">
     .box1{
     	width: 300px;
     	height: 300px;
     	background-color: wheat;
     	position: relative;
     }
     .box2{
     		width: 100px;
     		height: 100px;
     		background-color:lightgreen;
     		position: absolute;
     		top:50px;
     		left: 100px;
     	}
     }
	</style>
</head>
<body>
<img src="../images/hg.jpg">
	<div class="box1">
    <div class="box2"></div>
	</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
  // css()和attr()类似，自带getter/setter
  // 设置样式：css(neme[,value])
//   var res =$('img').css('width','300px')
// // var  res= $ ('img').css('width',200)
//  var res =$('img').css('border-radius','10%')
//   var res =$('img').css('box-shadow','5px 5px 5px #888')

// // 链似操作
//    var res=$('img').css('width','300px')
//                     .css('border-radius','10%')
//                      .css('box-shadow','5px 5px 5px #888')



  var res=$('img').css({
  	'width':'200px',
  	'border-radius':'40%',
  	'box-shadow':'5px 5px 5px #888'
  })

  // // 杰森改法
  //  var res=$('img').css({
  // 	"width":"200px",
  // 	"border-radius":"40%",
  // 	"box-shadow":"5px 5px 5px #888"
  // })
   var res =parseInt($('img').css('width'))

   res+=200
   var res=$('img').css('width',res+'px')
   var res=$('img').css('width')



// height(),width()
  
  // var res=$('img').width(200)
  // var res=$('img').width('200pt')
  var res=$('img').width(200)
  // 等于43行代码
  // 
   // 增加wihdth长度
   var res=$('img').width('+=50')  
   // var res=$('img').width('width','+=50')  
  // offset()
 var res=$('img').offset()
 // 获取与上边的距离想要获得的是数值请在top后面加+px
 var res=$('img').offset().top

// position()
  var res= $('box2').position()
  var res= $('box2').position()+'px'
// 控制台输出
  console.log(res)
  </script>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内联样式css()</title>
	<style type="text/css">
     .box1{
     	width: 300px;
     	height: 300px;
     	background-color: wheat;
     	position: relative;
     }
     .box2{
     		width: 100px;
     		height: 100px;
     		background-color:lightgreen;
     		position: absolute;
     		top:50px;
     		left: 100px;
     	}
     }
	</style>
</head>
<body>
<img src="../images/hg.jpg">
	<div class="box1">
    <div class="box2"></div>
	</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
  // css()和attr()类似，自带getter/setter
  // 设置样式：css(neme[,value])
//   var res =$('img').css('width','300px')
// // var  res= $ ('img').css('width',200)
//  var res =$('img').css('border-radius','10%')
//   var res =$('img').css('box-shadow','5px 5px 5px #888')

// // 链似操作
//    var res=$('img').css('width','300px')
//                     .css('border-radius','10%')
//                      .css('box-shadow','5px 5px 5px #888')



  var res=$('img').css({
  	'width':'200px',
  	'border-radius':'40%',
  	'box-shadow':'5px 5px 5px #888'
  })

  // // 杰森改法
  //  var res=$('img').css({
  // 	"width":"200px",
  // 	"border-radius":"40%",
  // 	"box-shadow":"5px 5px 5px #888"
  // })
   var res =parseInt($('img').css('width'))

   res+=200
   var res=$('img').css('width',res+'px')
   var res=$('img').css('width')



// height(),width()
  
  // var res=$('img').width(200)
  // var res=$('img').width('200pt')
  var res=$('img').width(200)
  // 等于43行代码
  // 
   // 增加wihdth长度
   var res=$('img').width('+=50')  
   // var res=$('img').width('width','+=50')  
  // offset()
 var res=$('img').offset()
 // 获取与上边的距离想要获得的是数值请在top后面加+px
 var res=$('img').offset().top

// position()
  var res= $('box2').position()
  var res= $('box2').position()+'px'
// 控制台输出
  console.log(res)
  </script>

运行实例 »

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


上一条：PHP+AJAX用户注册表单验证实例 2018年4月16日下一条：PHP代码规范的好习惯
juqery内联样式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多