js设置div的class, 在360浏览…

本文探讨了在360浏览器v7.1.1.531中使用JavaScript动态设置div的class属性时遇到的问题。在该版本中,setAttribute方法未能生效,导致样式无法正确应用。
问题:
如题,用360浏览器设置div的class,但在360浏览器上没生效,在chrome上是好的。另外,在360当时最新版本(忘了版本号了)上也是好的,出问题的是v7.1.1.531。

原因:
在该问题版本上," 使用setAttribute("class", value)语句动态设置Element的class属性在firefox中是可以的,但在IE中却不行。"

问题图:
红色部分,第一行最后一个元素被挤到了第二行。因为第一行最后一个的class没生效导致"margin-rignt:0px"没生效。
js设置div的class, <wbr>在360浏览器上不生效

正常图:
js设置div的class, <wbr>在360浏览器上不生效

上面代码经过测试,发现照片没有与球正切,请参考下面的代码,下面代码中,每个矩形都与球正切,请参照下面代码的正切方式,不同的只是下面代码显示的是矩形,我要的代码显示的是照片。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--做一个正方体 3D模型 球 圆柱 多层--> <style type="text/css"> .eye{ width: 100px; height: 100px; position:absolute ; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; -webkit-perspective: 4000px;/*透视距*/ } .stage{ width: 100px; height: 100px; border: 1px solid red; transform-style: preserve-3d; } .stage>div{ width: 100px; height: 100px; opacity:0.8; text-align: center; line-height: 100px; font-size: 30px; position: absolute; top: 0px; left: 0px; } .stage:hover{ transform: rotate3d(10,10,10,1800deg); transition: 50s; } .ele1{ background-color: red; transform: translateZ(400px); } .ele2{ background-color:yellow; transform: rotateX(30deg) translateZ(400px); } .ele3{ background-color: blue; transform: rotateX(60deg) translateZ(400px); } .ele4{ background-color:green; transform: rotateX(90deg) translateZ(400px); } .ele5{ background-color: aquamarine; transform: rotateX(120deg) translateZ(400px); } .ele6{ background-color: brown; transform: rotateX(150deg) translateZ(400px); } .ele7{ background-color: blueviolet; transform: rotateX(180deg) translateZ(400px); } .ele8{ background-color: #000000; transform: rotateX(210deg) translateZ(400px); } .ele9{ background-color: coral ; transform: rotateX(240deg) translateZ(400px); } .ele10{ background-color: beige; transform: rotateX(270deg) translateZ(400px); } .ele11{ background-color: azure; transform: rotateX(300deg) translateZ(400px); } .ele12{ background-color: darkkhaki; transform: rotateX(330deg) translateZ(400px); } .ele13{ background-color: blue; transform: rotateX(15deg) rotateY(30deg) translateZ(400px); } .ele14{ background-color:green; transform: rotateX(45deg) rotateY(30deg) translateZ(400px); } .ele15{ background-color: aquamarine; transform: rotateX(75deg) rotateY(30deg) translateZ(400px); } .ele16{ background-color: brown; transform: rotateX(105deg) rotateY(30deg) translateZ(400px); } .ele17{ background-color: blueviolet; transform: rotateX(135deg) rotateY(30deg) translateZ(400px); } .ele18{ background-color: #000000; transform: rotateX(165deg) rotateY(30deg) translateZ(400px); } .ele19{ background-color: coral ; transform: rotateX(195deg) rotateY(30deg) translateZ(400px); } .ele20{ background-color: beige; transform: rotateX(225deg) rotateY(30deg) translateZ(400px); } .ele21{ background-color: azure; transform: rotateX(255deg) rotateY(30deg) translateZ(400px); } .ele22{ background-color: darkkhaki; transform: rotateX(285deg) rotateY(30deg) translateZ(400px); } .ele23{ background-color: beige; transform: rotateX(315deg) rotateY(30deg) translateZ(400px); } .ele24{ background-color: azure; transform: rotateX(345deg) rotateY(30deg) translateZ(400px); } .ele25{ background-color: darkkhaki; transform: rotateX(375deg) rotateY(30deg) translateZ(400px); } .ele26{ background-color: blue; transform: rotateX(15deg) rotateY(-30deg) translateZ(400px); } .ele27{ background-color:green; transform: rotateX(45deg) rotateY(-30deg) translateZ(400px); } .ele28{ background-color: aquamarine; transform: rotateX(75deg) rotateY(-30deg) translateZ(400px); } .ele29{ background-color: brown; transform: rotateX(105deg) rotateY(-30deg) translateZ(400px); } .ele30{ background-color: blueviolet; transform: rotateX(135deg) rotateY(-30deg) translateZ(400px); } .ele31{ background-color: #000000; transform: rotateX(165deg) rotateY(-30deg) translateZ(400px); } .ele32{ background-color: coral ; transform: rotateX(195deg) rotateY(-30deg) translateZ(400px); } .ele33{ background-color: beige; transform: rotateX(225deg) rotateY(-30deg) translateZ(400px); } .ele34{ background-color: azure; transform: rotateX(255deg) rotateY(-30deg) translateZ(400px); } .ele35{ background-color: darkkhaki; transform: rotateX(285deg) rotateY(-30deg) translateZ(400px); } .ele36{ background-color: beige; transform: rotateX(315deg) rotateY(-30deg) translateZ(400px); } .ele37{ background-color: azure; transform: rotateX(345deg) rotateY(-30deg) translateZ(400px); } .ele38{ background-color: darkkhaki; transform: rotateX(375deg) rotateY(-30deg) translateZ(400px); } .ele39{ background-color: darkkhaki; transform: rotateX(0deg) rotateY(-60deg) translateZ(400px); } .ele40{ background-color: beige; transform: rotateX(60deg) rotateY(-60deg) translateZ(400px); } .ele41{ background-color: red; transform: rotateX(120deg) rotateY(-60deg) translateZ(400px); } .ele42{ background-color:yellow; transform: rotateX(180deg) rotateY(-60deg) translateZ(400px); } .ele43{ background-color: blue; transform: rotateX(240deg) rotateY(-60deg) translateZ(400px); } .ele44{ background-color:green; transform: rotateX(300deg) rotateY(-60deg) translateZ(400px); } .ele45{ background-color: aquamarine; transform: rotateX(360deg) rotateY(-60deg) translateZ(400px); } .ele46{ background-color: brown; transform: rotateX(0deg) rotateY(60deg) translateZ(400px); } .ele47{ background-color: blueviolet; transform: rotateX(60deg) rotateY(60deg) translateZ(400px); } .ele48{ background-color: #000000; transform: rotateX(120deg) rotateY(60deg) translateZ(400px); } .ele49{ background-color: coral ; transform: rotateX(180deg) rotateY(60deg) translateZ(400px); } .ele50{ background-color: beige; transform: rotateX(240deg) rotateY(60deg) translateZ(400px); } .ele51{ background-color: beige; transform: rotateX(300deg) rotateY(60deg) translateZ(400px); } .ele52{ background-color: beige; transform: rotateX(0deg) rotateY(90deg) translateZ(400px); } .ele53{ background-color: beige; transform: rotateX(0deg) rotateY(-90deg) translateZ(400px); } </style> </head> <body> <div class="eye"> <div class="stage"> <div class="ele1">1</div> <div class="ele2">2</div> <div class="ele3">3</div> <div class="ele4">4</div> <div class="ele5">5</div> <div class="ele6">6</div> <div class="ele7">7</div> <div class="ele8">8</div> <div class="ele9">9</div> <div class="ele10">10</div> <div class="ele11">11</div> <div class="ele12">12</div> <div class="ele13">13</div> <div class="ele14">14</div> <div class="ele15">15</div> <div class="ele16">16</div> <div class="ele17">17</div> <div class="ele18">18</div> <div class="ele20">20</div> <div class="ele19">19</div> <div class="ele21">21</div> <div class="ele22">22</div> <div class="ele23">23</div> <div class="ele24">24</div> <div class="ele25">25</div> <div class="ele26">26</div> <div class="ele27">27</div> <div class="ele28">28</div> <div class="ele29">29</div> <div class="ele30">30</div> <div class="ele31">31</div> <div class="ele32">32</div> <div class="ele33">33</div> <div class="ele34">34</div> <div class="ele35">35</div> <div class="ele36">36</div> <div class="ele37">37</div> <div class="ele38">38</div> <div class="ele39">39</div> <div class="ele40">40</div> <div class="ele41">41</div> <div class="ele42">42</div> <div class="ele43">43</div> <div class="ele44">44</div> <div class="ele45">45</div> <div class="ele46">46</div> <div class="ele47">47</div> <div class="ele48">48</div> <div class="ele49">49</div> <div class="ele50">50</div> <div class="ele51">51</div> <div class="ele52">52</div> <div class="ele53">53</div> </div> </div> </body> </html>
06-05
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值