<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Document</title> | |
<style> | |
*{ | |
margin: 0; | |
padding: 0; | |
} | |
#box{ | |
width: 500px; | |
height: 500px; | |
margin: 0 auto; | |
text-align: center; | |
font-size: 50px; | |
} | |
</style> | |
<script src='js/jquery-1.11.3.min.js'></script> | |
<script> | |
$(function(){ | |
// 设置box的CSS | |
$('button:eq(0)').click(function(){ | |
$('#box').css({"textAlign": "center", "lineHeight":'500px', 'background-color':'lime','color':'pink'}); | |
}) | |
// 获取box的字体大小 | |
$('button:eq(1)').click(function(){ | |
alert($('#box').css('font-size')); | |
}) | |
//设置box的内容宽度为300 | |
$('button:eq(2)').click(function(){ | |
$('#box').width(345) | |
}) | |
//设置box的内容高度为300 | |
$('button:eq(3)').click(function(){ | |
$('#box').height(345) | |
}) | |
//获取box的内容宽度与高度 | |
$('button:eq(4)').click(function(){ | |
alert('box的内容宽度与高度分别为:'+$('#box').width()+' , '+$('#box').height()); | |
}) | |
// 获取box的内容宽度+内边距宽度 | |
$('button:eq(5)').click(function(){ | |
alert($('#box').innerWidth()); | |
}) | |
//获取box的内容宽度+内边距宽度+边宽 | |
$('button:eq(6)').click(function(){ | |
alert($('#box').outerWidth()); | |
}) | |
// 获取box的内容宽度+内边距宽度+边宽+外边距宽度 | |
$('button:eq(7)').click(function(){ | |
alert($('#box').outerWidth(true)); | |
}) | |
//获取浏览器窗口的宽高 | |
$('button:eq(8)').click(function(){ | |
alert('获取浏览器窗口的宽高:'+$(window).width()+','+$(window).height()); | |
}) | |
}) | |
</script> | |
</head> | |
<body> | |
<button>设置box的css</button> | |
<button>获取box的字体大小</button> | |
<button>设置box的内容宽度为345</button> | |
<button>设置box的内容高度为345</button> | |
<button>获取box的内容的宽度和高度</button> | |
<button>获取box的内容宽度+内边距宽度</button> | |
<button>获取box的内容宽度+内边距宽度+边宽</button> | |
<button>获取box的内容宽度+内边距宽度+边宽+外边距宽度</button> | |
<button>获取浏览器窗口的宽高</button> | |
<div id='box'>我是文字,你好 !</div> | |
</body> | |
</html> |
jquery操作css样式
猜你喜欢
转载自www.cnblogs.com/zykzyk/p/11390833.html
今日推荐
周排行