Question

我正在尝试使用jQuery根据第一个span背景颜色动态更改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

非常感谢，拉夫

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/

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

3 个答案:

纯js代码