时间戳

首页 > 解决方案 > 如果 attr() 中有重复属性，那么它是否总是在 jquery 中应用最后一个重复属性？

javascript - 如果 attr() 中有重复属性，那么它是否总是在 jquery 中应用最后一个重复属性？

问题描述

我很困惑，只是我想知道我是否在 attr() 中给出了重复的属性，那么我只能应用最后一个属性 ex --> 我attr({style:'color:yellow',style:'font-family:arial',style:'color:yellow'})在这里给出了三个相同的样式只能应用最后一个吗？是否可以应用第二种样式？

<!DOCTYPE html>
<html>
<body>
   <p id="prg1">first paragraph</p>
</body>
<script src="C:\Users\SUDARSHAN\Desktop\html_UI\jquery-3.6.0.js">
</script>
<script>
   $('document').ready(function (){

      $('#prg1').attr({style:'color:yellow',style:'font-family:arial',style:'color:yellow',style:'border-style:dotted'});
    
   })
</script>
</html>

标签： javascriptjquerycss

解决方案

因此，您的问题有点令人困惑，但我将尝试解决所有可能的情况：

  1. 您的代码有一个非常严重的错误：您不能在对象中有重复的键，无论这是样式还是.attr()函数。所以这是完全错误的；任何对象b = { a: 1, a: 2 }都是无效的，不应使用，但结果将是b === { a: 2 }
  2. 如果您尝试使用.attr({style:'color:yellow'}).attr({style:'font-family:arial')yes，它将获得最后一个，因为该attr函数总是覆盖该值，从不合并它；
  3. 我认为这是您真正想知道的：.attr({ style:'color:yellow; font-family:arial; border-style:dotted'});查看样式上的每个项目都用“;”分隔。基本上，当您使用.attr+ style 时，您正在为 html 元素设置完整的样式属性，这意味着整个 css 代码，因此您不需要每个道具一个“样式”，也不需要每个道具一个“属性”；只需将整个 css 字符串设置为 style 属性，也就是说，您可以拥有任意数量的 css 道具，只需将它们用 ';' 分隔即可

编辑：我已经根据您的问题在这里回答了，但正如@Phil 在下面的第一条评论中提到的那样，您可能会通过使用jquery的.css()获得更好的解决方案：

.css({
    color: "yellow", fontFamily: "arial", borderStyle: "dotted"
  });

注意带有“-”的道具使用驼峰式，或者将整个道具名称放在引号中，如“border-style”

:)

推荐阅读