动态添加的元素不需要适当的CSS(仅限js)

dynamically added elements won't take proper css (js only)

本文关键字：仅限 js CSS 添加 元素 不需要 动态      更新时间：2023-09-26

我有一个<ul>元素，得到它的<li>动态添加，我试图让第一个<li>比其余的width宽一点，CC_4为63%，而其他人只有60%，但出于某种原因，第一个只得到60%，知道为什么吗?

我不能使用CSS文件，这必须是Javascript。

下面是我的代码: 
$('.list').css({
  listStyle: 'none',
  padding: '0',
  height: '100%',
  overflowX: 'scroll',
});
$('.item-wrapper').css({
  background:'#FFFFFF',
  width: '60%',
  margin: '5px',
});
$('.item-wrapper').first().css({
  width:'63% !important',
});
编辑:

我没有添加结果标记，它是:

<ul class="list" style="list-style: none; padding: 0px; height: 100%; overflow-x: scroll;">
  <li class="item">
    <div class="item-wrapper" style="width: 60%; margin: 5px; background: rgb(255, 255, 255);">
        <img class="thumbnail" src="images/frame_0001.png" alt="tumbnail" style="width: 25%;">
    </div>
  </li>
  <li class="item">
    <div class="item-wrapper" style="width: 60%; margin: 5px; background: rgb(255, 255, 255);">
        <img class="thumbnail" src="images/frame_0002.png" alt="tumbnail" style="width: 25%;">
    </div>
  </li>
</ul>

EDIT 2:我已经重新安排了。css()函数的顺序，但仍然没有好的

这只是因为你使用了!important，删除它。

它将读取:

$('.item-wrapper').first().css({
  width:'63%',
});

除此之外，您的语法很好。你的方法有点可疑，但你显然有其他地方的需求来避免使用CSS。

更多关于jQuery与!important的问题:

http://bugs.jquery.com/ticket/11173

注意:既然你现在没有优先级的概念，排序是重要的!例如，如果你重构你的javascript，在其他地方设置宽度为60%之前，将宽度设置为63%，它将保持60%。

尝试重新排序

$('.item-wrapper').css({
  background:'#FFFFFF',
  width: '60%',
  margin: '5px'
});
$('.item-wrapper').first().css({
  width:'63% !important'
});

请注意，您选择了.item-wrapper元素，然后应用了样式。

在函数中试试

    $(document).ready(function(){
$('.list').css({
  listStyle: 'none',
  padding: '0',
  height: '100%',
  overflowX: 'scroll',
});
$('.item-wrapper').first().css({
  width:'63% !important',
});
$('.item-wrapper').css({
  background:'#FFFFFF',
  width: '60%',
  margin: '5px',
});
    })

JSFIDDLE

相关文章：