मैं उत्पन्न होने वाले बाएं और दाएं संदेशों में इनलाइन सीएसएस जोड़ना चाहता हूं, उदाहरण के लिए बाएं टेक्स्ट लाल है और दायां टेक्स्ट नीला है। (मुझे पता है कि सीएसएस में स्टाइल करना सबसे अच्छा है, लेकिन मैं कुछ और परीक्षण कर रहा हूं)। तो मेरे पास यह एचटीएमएल होगा:

<ul class="messages">
  <li class="message left appeared">
    <div class="text_wrapper">
      <p class="text" style="color:red;">blabla</p>
    </div>
  </li>
  <li class="message right appeared">
    <div class="text_wrapper">
      <p class="text" style="color:blue;">blabla</p>
    </div>
  </li>
</ul>

कृपया कोड को कार्यक्षमता के संदर्भ के रूप में देखें। आपकी सहायता के लिए बहुत - बहुत धन्यवाद।

(function() {
  var Message;

  Message = function({
      text: text1,
      message_side: message_side1
    }) {
    this.text = text1;
    this.message_side = message_side1;
    this.draw = () => {
      var $message;
      $message = $($('.message_template').clone().html());
      $message.addClass(this.message_side).find('.text').html(this.text);
      $('.messages').append($message);
      return setTimeout(function() {
        return $message.addClass('appeared');
      }, 0);
    };
    return this;
  };

  $(function() {
    var getMessageText, message_side, sendMessage;
    message_side = 'right';
    getMessageText = function() {
      var $message_input;
      $message_input = $('.message_input');
      return $message_input.val();
    };
    sendMessage = function(text) {
      var $messages, message;
      if (text.trim() === '') {
        return;
      }
      $('.message_input').val('');
      $messages = $('.messages');
      message_side = message_side === 'left' ? 'right' : 'left';
      message = new Message({text, message_side});
      message.draw();
      return $messages.animate({
        scrollTop: $messages.prop('scrollHeight')
      }, 300);
    };
    $('.send_message').click(function(e) {
      return sendMessage(getMessageText());
    });
    $('.message_input').keyup(function(e) {
      if (e.which === 13) { // enter key
        return sendMessage(getMessageText());
      }
    });
  });

}).call(this);
* {
  box-sizing: border-box;
}
.chat_window {
  position: absolute;
  width: calc(100% - 20px);
  max-width: 600px;
  height: 440px;
  background-color: #fff;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  border: 1px solid #ddd;
  overflow: hidden;
}
.messages {
  position: relative;
  list-style: none;
  padding: 20px 10px 0 10px;
  margin: 0;
  height: 347px;
  overflow: scroll;
}
.messages .message {
  clear: both;
  overflow: hidden;
  margin-bottom: 20px;
  transition: all 0.5s linear;
  opacity: 0;
}
.messages .message.left .text_wrapper {
  background-color: #ddd;
  margin-left: 20px;
}
.messages .message.left .text_wrapper::after, .messages .message.left .text_wrapper::before {
  right: 100%;
  border-right-color: #ddd;
}
.messages .message.left .text,
.messages .message.right .text {
  color: #000;
  margin: 0;
}
.messages .message.right .text_wrapper {
  background-color: #ddd;
  margin-right: 20px;
  float: right;
}
.messages .message.right .text_wrapper::after, .messages .message.right .text_wrapper::before {
  left: 100%;
  border-left-color: #ddd;
}
.messages .message.appeared {
  opacity: 1;
}
.messages .message .text_wrapper {
  display: inline-block;
  padding: 20px;
  width: calc(100% - 85px);
  min-width: 100px;
  position: relative;
}
.messages .message .text_wrapper::after, .messages .message .text_wrapper:before {
  top: 18px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.messages .message .text_wrapper::after {
  border-width: 13px;
  margin-top: 0px;
}
.messages .message .text_wrapper::before {
  border-width: 15px;
  margin-top: -2px;
}
.messages .message .text_wrapper .text {
  font-size: 18px;
  font-weight: 300;
}

.bottom_wrapper {
  position: relative;
  width: 100%;
  background-color: #fff;
  padding: 20px 20px;
  position: absolute;
  bottom: 0;
}
.bottom_wrapper .message_input_wrapper {
  display: inline-block;
  height: 50px;
  border: 1px solid #bcbdc0;
  width: calc(100% - 160px);
  position: relative;
  padding: 0 20px;
}
.bottom_wrapper .message_input_wrapper .message_input {
  border: none;
  height: 100%;
  box-sizing: border-box;
  width: calc(100% - 40px);
  position: absolute;
  outline-width: 0;
  color: gray;
}
.bottom_wrapper .send_message {
  width: 140px;
  height: 50px;
  display: inline-block;
  background-color: #ddd;
  border: 2px solid #ddd;
  color: #000;
  cursor: pointer;
  transition: all 0.2s linear;
  text-align: center;
  float: right;
}
.bottom_wrapper .send_message:hover {
  color: #000;
  background-color: #fff;
}
.bottom_wrapper .send_message .text {
  font-size: 18px;
  font-weight: 300;
  display: inline-block;
  line-height: 48px;
}

.message_template {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat_window">
  <ul class="messages"></ul>
  <div class="bottom_wrapper clearfix">
    <div class="message_input_wrapper">
      <input class="message_input" placeholder="Type here..." />
    </div>
    <div class="send_message">
      <div class="icon"></div>
      <div class="text">
        Send
      </div>
    </div>
  </div>
</div>
<div class="message_template">
  <li class="message">
    <div class="text_wrapper">
      <p class="text"></p>
    </div>
  </li>
</div>
0
redibis 5 नवम्बर 2020, 21:02

4 जवाब

सबसे बढ़िया उत्तर
$("li.message.left > div.text_wrapper > p").css('color', 'red');
$("li.message.right > div.text_wrapper > p").css('color', 'blue');
0
redibis 11 नवम्बर 2020, 12:47

आप प्रत्येक HTML घटक के classList का उपयोग कर सकते हैं। बस, कक्षा left (या right) के साथ DOM तत्व का चयन करें और किसी भी वर्ग को असाइन करने के लिए add विधि का उपयोग करें:

var elementLeft = $('.left')
elementLeft.classList.add('yourClass')

आप किसी भी वर्ग को हटाने के लिए remove विधियों का उपयोग कर सकते हैं, या किसी वर्ग को चालू करने के लिए toggle का उपयोग कर सकते हैं।

elementLeft.classList.remove('yourClass')
elementLeft.classList.toggle('yourClass')

Element.classList में और उदाहरण हैं। यह समाधान jQuery या अन्य जावास्क्रिप्ट लाइब्रेरी के बिना काम करता है, लेकिन मानक एपीआई का उपयोग करें।

-1
a_manfrinati 5 नवम्बर 2020, 21:28

JQuery का उपयोग करके आप एक तत्व में इनलाइन शैली जोड़ सकते हैं

$(".left").attr("style","whatever");
$(".right").attr("style","whatever");
-1
Ozgur Sar 5 नवम्बर 2020, 21:14

आप यह भी जोड़ सकते हैं:

$(".left").css("color", "yellow");
$(".right").css("color", "blue");
0
timber535 5 नवम्बर 2020, 21:25