从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