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

Question

我试图使用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内的第一个span。

这是我去了多远..我想我差点儿但找不到元素。 https://jsfiddle.net/rmcardoso/ps1q82zk/6

非常感谢，Raf

Answer 1

工作守则：

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

Answer 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'));
});

Answer 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/