4月4号juqery作业 - 作业

Home > List of blog posts > 4月4号juqery作业

Blogger Information

Blog 24

fans 0

comment 0

visits 15271

Special Recommendation

More>

Related recommendations

Related Tutorials

Popular Recommendations

Latest courses

The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

1409054 times of learning
Collection
PHP introductory tutorial one: Learn PHP in one week

4242181 times of learning
Collection
JAVA Beginner's Video Tutorial

2440416 times of learning
Collection

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template

4月4号juqery作业

小蚂蚁的博客

Original

640 people have browsed it

<!DOCTYPE html>

<html>

<head>

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

.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>

<div>

</div>

</body>

</html>

// 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>

运行实例 »

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

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

3.21作业

2018-03-26 18:18:11

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例

实例