JS 怎么给<li>标签添加width样式

JS 怎么给<li>标签添加width样式,第1张

比如如下的li结构,要想给每个li都加一个固定的width:

<div id="imageMenu">

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</div>

js实现:

var li=document.getElementsByTagName("li")//取得所有的li元素

for(var i=0i<l.lengthi++){ //循环对每一个li进行width处理

li[i].style.width="100px"//利用内嵌样式增加width

}

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>demo</title>

<style type="text/css">

    *{margin:0padding:0}

    .box{width:300pxheight:30pxbackground:#da251a}

    .click1{width:120pxheight:30pxline-height:30pxtext-align:centercolor:#fffbackground:#000margin-bottom:10px cursor:pointer}

    .click2{width:120pxheight:30pxline-height:30pxtext-align:centercolor:#fffbackground:#000cursor:pointer}

</style>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

    $(function(){

        $(".click1").click(function(){

            var bHeight=$(".box").height()

            bHeight+=30

            $(".box").css("height",bHeight)

        })

        $(".click2").click(function(){

            var bHeight=$(".box").height()

            bHeight-=30

            $(".box").css("height",bHeight)

        })

    })

</script>

</head>

<body>

<div class="click1">增加</div>

<div class="click2">减少</div>

<div class="box"></div>

</body>

</html>

自己把对应的jq库文件引入下即可。

写的不好,请谅解!


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11252158.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-14
下一篇2023-05-14

发表评论

登录后才能评论

评论列表(0条)

    保存