3
votes

Obtenir la couleur d'arrière-plan de la première plage à l'intérieur du div

J'essaie d'utiliser jQuery pour modifier dynamiquement une couleur d'arrière-plan div en fonction de la couleur d'arrière-plan de la première plage.

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

Pouvez-vous m'aider à indiquer la bonne direction?

J'essayais d'utiliser prop ("class") car ce div n'a pas d'identifiant mais je ne sais pas comment le faire J'obtiens le premier span à l'intérieur du div.

Voici jusqu'où je suis allé .. Je pense que j'y suis presque mais je ne trouve pas l'élément. https://jsfiddle.net/rmcardoso/ps1q82zk/6

Merci beaucoup, Raf

jquery html angularjs

0 commentaires

3 Réponses :

1
votes

Le textarea a un id , vous pouvez le rassembler et trouver son frère ayant la classe dont vous avez besoin, puis lire son code css code > attribut.

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

  EDIT 
  Voici comment modifier la couleur d'arrière-plan de la zone de texte: 
 $("#activity-stream-comments-textarea").css("background-color", $("#activity-stream-comments-textarea").siblings(".sn-stream-input-decorator").css("background-color"));
  Ou, à partir de votre code dans le violon que vous avez donné: 
 var bc = $("#activity-stream-comments-textarea").siblings(".sn-stream-input-decorator").css("background-color");

2 commentaires

Ça marche. Au lieu du div principal, je souhaite modifier l'arrière-plan de la zone de texte. Avez-vous une idée de comment y parvenir? jsfiddle.net/rmcardoso/ps1q82zk/11

@RafaelCardoso J'ai modifié ma réponse. Cependant, je me demande si tout va bien. Le fait que vous utilisiez .each () suggère que vous avez probablement plus d'éléments ayant la classe sn-stream-textarea-container. Si c'est le vase et que vous avez une zone de texte avec l'id de activity-stream-comments-textarea à l'intérieur de chacune, alors votre HTML n'est pas valide et vous voudrez peut-être convertir cet identifiant en une classe.

2
votes

Code de travail:

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

2 commentaires

Ok, génial. Ça marche. Et imaginez que je veuille changer une zone de texte dans le même div que le span? Avez-vous une idée de comment y parvenir? jsfiddle.net/rmcardoso/ps1q82zk/11

Je ne sais pas trop ce que vous entendez par "modifier une zone de texte". En quoi voulez-vous le changer? Pour accéder à une zone de texte dans jQuery, vous pouvez utiliser $ (element) .find ("textarea"). Css ('background-color', $ (element) .find ('span: first'). Css ('background -couleur '));

0
votes

Code js pur

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

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
}

https://jsfiddle.net/40cunwho/

h3>

0 commentaires