您的位置：首页 > Web前端 > JQuery

复习练习（03）jquery Css方法一步步升级

2016-05-15 17:00 671 查看

jquery Css方法一步步升级

<script src="jquery-1.8.3.js"></script>

<script type="text/javascript">
//css 方法 一步步升级
//1.css
/* $(function () {
$("input").click(function() {
$(".shang").css("font-size", "22px");
$(".shang").css("background-color", "red");
$(".shang").css("border", "#000 5px solid");
$(".shang").css("opacity", "0.5");
});

});
*/

//2.css
/* $(function () {
$("input").click(function () {
$(".shang").css("font-size", "22px").css("background-color", "red").css("border", "#000 5px solid").css("opacity", "0.5");
});

});
*/

//3.css
/* $(function () {
$("input").click(function () {
var s =
{
"font-size": "22px",
"background-color": "red",
"border": "#000 5px solid",
"opacity": "0.5"
}
$(".shang").css(s);
});
});
*/
//4.css
$(function () {
$("input").click(function () {

$(".shang").css({
"font-size": "22px",
"background-color": "red",
"border": "#000 5px solid",
"opacity": "0.5"
});
});
});

//5.css
$(function () {
$("input").click(function ()

{

$(".shang").css({width: function (index, value){ return ((index * 50) + 100) + "px"; },

"height": "100px",

"background-color": "red"

});

});
});

</script>

</head>
<body>
<input type="button" value="dianji"/>
<div id="shang" class="shang">dddds
<ul>
<li>fasl</li>
<li> sssss<span> span hong1</span></li>
<li> sssss<span> span hong2</span></li>
</ul>
</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航