获取 div 内第一个跨度的背景颜色答案

【问题标题】：Get background-color of the first span inside of the div获取 div 内第一个跨度的背景颜色
【发布时间】：2019-01-29 18:48:14
【问题描述】：

我正在尝试使用 jQuery 根据第一个跨度背景颜色动态更改 div 背景颜色。

<div class="sn-stream-textarea-container">
   <span class="sn-stream-input-decorator" style="background-color: #badaff"></span>
   <textarea id="activity-stream-comments-textarea" class="sn-string-textarea form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-empty ng-valid-required" placeholder="Customer facing notes (Customer visible)" data-stream-text-input="comments" ng-required="activity_field_0.mandatory &amp;&amp; !activity_field_0.filled" ng-model="activity_field_0.value" ng-attr-placeholder="{{activity_field_0.label}}" sn-sync-with="activity_field_0.name" sn-sync-with-value-in-fn="reduceMentions(text)" sn-sync-with-value-out-fn="expandMentions(text)" mentio="" mentio-id="'activity-stream-comments-textarea'" mentio-typed-term="typedTerm" mentio-require-leading-space="true" mentio-trigger-char="'@'" mentio-items="members" mentio-search="searchMembersAsync(term)" mentio-template-url="/at-mentions.tpl" mentio-select="selectAtMention(item)" mentio-suppress-trailing-space="true" sn-resize-height="" autocomplete="off" style="overflow: hidden; overflow-wrap: break-word; height: 64px;" aria-invalid="false"></textarea>
</div>

你能帮我指出正确的方向吗？

我试图使用 prop("class") 因为这个 div 没有标识符，但我不确定如何获得 div 内的第一个跨度。

这就是我走了多远。我想我快到了，但找不到元素。 https://jsfiddle.net/rmcardoso/ps1q82zk/6

非常感谢，拉夫

【问题讨论】：

标签： jquery html angularjs

【解决方案1】：

工作代码：

$('.sn-stream-textarea-container').each(function(){
    var bColor = $(this).find('span:first').css('background-color');
    $(this).css('background-color', bColor);
});

【讨论】：

好的，太棒了。有用。想象一下，我想更改与跨度相同的 div 内的 textarea 吗？你知道如何实现吗？ jsfiddle.net/rmcardoso/ps1q82zk/11
我不太确定“更改文本区域”是什么意思。你想把它改成什么？要在 jQuery 中访问文本区域，您可以使用 $(element).find("textarea").css('background-color', $(element).find('span:first').css('background-color'));

【解决方案2】：

textarea 有一个id，你可以收集它并找到它的兄弟有你需要的类，然后读取它的背景颜色css 属性。

var bc = $("#activity-stream-comments-textarea").siblings(".sn-stream-input-decorator").css("background-color");

编辑

这是修改文本区域背景颜色的方法：

$("#activity-stream-comments-textarea").css("background-color", $("#activity-stream-comments-textarea").siblings(".sn-stream-input-decorator").css("background-color"));

或者，从您提供的小提琴中的代码开始：

$(".sn-stream-textarea-container").each(function(index,element){
    $(element).find("textarea:last").css('background-color', $(element).find('span:first').css('background-color'));
});

【讨论】：

这行得通。而不是主 div，我想更改 textarea 背景。你知道如何实现吗？ jsfiddle.net/rmcardoso/ps1q82zk/11
@RafaelCardoso 我已经编辑了我的答案。但是，我想知道是否一切都好。您使用 .each() 的事实表明您可能有更多具有 sn-stream-textarea-container 类的元素。如果那是花瓶，并且每个里面都有一个 id 为 activity-stream-cmets-textarea 的 textarea，那么您的 HTML 无效，您可能希望将该 id 转换为一个类。

【解决方案3】：

纯js代码

const elements = document.querySelectorAll(".sn-stream-input-decorator")
for (const element of elements) {
 
 // change background of the parent node. 
 element.parentNode.style.backgroundColor = element.style.backgroundColor
 
 // Use one of these two to change background of the textarea
 element.nextElementSibling.style.backgroundColor = element.style.backgroundColor
 
 // document.getElementById("activity-stream-comments-textarea").style.backgroundColor = element.style.backgroundColor
}

<div class="sn-stream-textarea-container">
   <span class="sn-stream-input-decorator" style="background-color: #badaff"></span>
   <textarea id="activity-stream-comments-textarea" class="sn-string-textarea form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-empty ng-valid-required"></textarea>
</div>

https://jsfiddle.net/40cunwho/

【讨论】：