從Typescript / javascript更改HTML元素的CSS

Question

我在我的React JS應用程序中的一種HTML表單中使用星級評分小部件。 我指的是此小部件https://www.everythingfrontend.com/posts/star-rating-input-pure-css.html。 當用戶單擊五星級之一中的評分時，用戶信息將保存到服務器。

當用戶單擊任何星星時，星星將保持選中狀態。 我想將響應從服務器返回時，將星星重置為未選擇狀態，以進行用戶的下一步操作。

我不知道如何使用Typescript / Javascript做到這一點。 我嘗試如下更改它：

    let ratingElement = document.querySelectorAll("#ratingField >  label");
    if (ratingElement.length > 0) {
      for (let i = 0; i < ratingElement.length; i++) {
        ratingElement[i].style.color = "#ddd";
      }
    }

使用上面的代碼，顏色將重置。 但是CSS中還有其他屬性，如小部件上的hover ， checked ， unchecked 。 如何添加這些屬性以重置與初始階段相同的星星？

以下是我的小部件CSS：

.rating {
  border: none;
  float: left;
}

.rating > input {
  display: none;
}
.rating > label:before {
  margin: 5px;
  font-size: 25px;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > label {
  color: #ddd;
  float: right;
}

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label {
  color: #ffd700;
} /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label {
  color: #ffed85;
}

我的HTML代碼像：

<fieldset
    className="rating"
    style={{ marginLeft: 5, marginRight: 5 }}
    id="ratingField"
>
    <input type="radio" id="star5" name="rating" value="5" />
    <label
        onClick={() => this.shortlist(5)}
        className="full"
        htmlFor="star5"
        title="Awesome"
    />
    <input type="radio" id="star4" name="rating" value="4" />
    <label
        onClick={() => this.shortlist(4)}
        className="full"
        htmlFor="star4"
        title="Pretty good"
    />
    <input type="radio" id="star3" name="rating" value="3" />
    <label
        onClick={() => this.shortlist(3)}
        className="full"
        htmlFor="star3"
        title="Average"
    />
    <input type="radio" id="star2" name="rating" value="2" />
    <label
        onClick={() => this.shortlist(2)}
        className="full"
        htmlFor="star2"
        title="Kinda bad"
    />
    <input type="radio" id="star1" name="rating" value="1" />
    <label
        onClick={() => this.shortlist(1)}
        className="full"
        htmlFor="star1"
        title="Worst"
    />
</fieldset>

有人可以幫忙嗎？

Answer 1

使用瀏覽器檢查器了解您的stars小部件的初始狀態（類，內聯樣式等）。 我的建議是不要使用內聯樣式。

之后，您必須還原您的初始類，您可以使用以下方法進行：

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

如果甚至有類似“已檢查”的內容，您可以執行以下操作：

// Check
document.getElementById("checkbox").checked = true;

// Uncheck
document.getElementById("checkbox").checked = false;

您可以使用以下方法取消選中元素：

document.getElementById("star1").checked = false;

對於每個選中的元素，您可以通過這種方式取消選中它。

Answer 2

  let ratingElement = document.querySelectorAll("#ratingField input[type=radio]:checked");

  ratingElement.forEach( function( obj, idx ) {
    console.log(obj);
    obj.checked = false;
  });

檢查這個小提琴-https: //jsfiddle.net/8bk37a5j/16/

您不需要在javascript中設置樣式。 只需將“ checked”值更改為true / false，其余的應該在CSS中處理。

Answer 3

  <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/> <script> $(document).ready(function(){ $('input[type="radio"]').click(function(){ $('input[type="radio"]').next('label').css('background-position','0 -16px') for(var i=1;i<=parseInt($(this).attr('name'));i++) { $('input[name="'+i+'"]').next('label').css('background-position','0 0') } }) $('#reset').click(function(){ $('input[type="radio"]').next('label').css('background-position','0 -16px') }) }) </script> <style> .rating { overflow: hidden; display: inline-block; } .rating-input { float: right; width: 16px; height: 16px; padding: 0; margin: 0 0 0 -16px; opacity: 0; } .rating-star { cursor: pointer; position: relative; display: block; width: 16px; height: 16px; background: url('https://www.everythingfrontend.com/samples/star-rating/star.png') 0 -16px; } .rating-star:hover { background-position: 0 0; } </style> <body> <span class="rating"> <input type="radio" class="rating-input" id="rating-input-1-5" name="1"> <label for="rating-input-1-5" class="rating-star"></label> <input type="radio" class="rating-input" id="rating-input-1-4" name="2"> <label for="rating-input-1-4" class="rating-star"></label> <input type="radio" class="rating-input" id="rating-input-1-3" name="3"> <label for="rating-input-1-3" class="rating-star"></label> <input type="radio" class="rating-input" id="rating-input-1-2" name="4"> <label for="rating-input-1-2" class="rating-star"></label> <input type="radio" class="rating-input" id="rating-input-1-1" name="5"> <label for="rating-input-1-1" class="rating-star"></label> <input type="button" value="Reset" id="reset"> </span> </body> </html>

從Typescript / javascript更改HTML元素的CSS

問題描述

3 個解決方案

解決方案1
1 已采納 2018-06-26 07:06:47

解決方案2
0 2018-06-26 07:29:22

解決方案3
0 2018-06-26 07:40:26

從Typescript / javascript更改HTML元素的CSS

問題描述

3 個解決方案

解決方案1 1 已采納 2018-06-26 07:06:47

解決方案2 0 2018-06-26 07:29:22

解決方案3 0 2018-06-26 07:40:26

解決方案1
1 已采納 2018-06-26 07:06:47

解決方案2
0 2018-06-26 07:29:22

解決方案3
0 2018-06-26 07:40:26