从Typescript / javascript更改HTML元素的CSS
[英]Change css of HTML element from typescript/javascript
问题描述
I am using star rating widget in one of my HTML forms in my React JS application. 
我在我的React JS应用程序中的一种HTML表单中使用星级评分小部件。 I am referring this widget https://www.everythingfrontend.com/posts/star-rating-input-pure-css.html. 我指的是此小部件https://www.everythingfrontend.com/posts/star-rating-input-pure-css.html。 When user clicks rating from one of five star, the user information gets saved to server. 当用户单击五星级之一中的评分时，用户信息将保存到服务器。
The stars remain selected when user clicks on any star. 当用户单击任何星星时，星星将保持选中状态。 I want to reset the stars back to unselected when the response comes back from server for user's next action. 我想将响应从服务器返回时，将星星重置为未选择状态，以进行用户的下一步操作。
I dont know how to do that using Typescript/Javascript. 我不知道如何使用Typescript / Javascript做到这一点。 I tried changing it like below : 我尝试如下更改它：
let ratingElement = document.querySelectorAll("#ratingField > label");
if (ratingElement.length > 0) {
for (let i = 0; i < ratingElement.length; i++) {
ratingElement[i].style.color = "#ddd";
}
}
Using the above code, the color gets reset. 使用上面的代码，颜色将重置。 But there are other properties in CSS like hover , checked , unchecked on the widget. 但是CSS中还有其他属性，如小部件上的hover ， checked ， unchecked 。 How to add those properties to reset the stars same like its initial stage? 如何添加这些属性以重置与初始阶段相同的星星？
Below is my CSS for the widget: 以下是我的小部件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;
}
And my HTML code is like : 我的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>
Can anyone help? 有人可以帮忙吗？
3 个解决方案
解决方案1
1 已采纳 2018-06-26 07:06:47
Use the browser inspector to understand what's the initial status of your stars widget (classes, inline styles, etc.). 使用浏览器检查器了解您的stars小部件的初始状态（类，内联样式等）。 My advice is to not use inline styles. 我的建议是不要使用内联样式。
After that you have to restore your initial classes, you can do it with: 之后，您必须还原您的初始类，您可以使用以下方法进行：
document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
If there is even something like "checked" you can do: 如果甚至有类似“已检查”的内容，您可以执行以下操作：
// Check
document.getElementById("checkbox").checked = true;
// Uncheck
document.getElementById("checkbox").checked = false;
In your case you can uncheck element just with: 您可以使用以下方法取消选中元素：
document.getElementById("star1").checked = false;
For each element checked you can uncheck it this way. 对于每个选中的元素，您可以通过这种方式取消选中它。
解决方案2
0 2018-06-26 07:29:22
let ratingElement = document.querySelectorAll("#ratingField input[type=radio]:checked");
ratingElement.forEach( function( obj, idx ) {
console.log(obj);
obj.checked = false;
});
Check this fiddle - https://jsfiddle.net/8bk37a5j/16/ 检查这个小提琴-https: //jsfiddle.net/8bk37a5j/16/
You dont need to set styes in javascript. 您不需要在javascript中设置样式。 Just change the "checked" value to true/false and the rest should be handled in CSS. 只需将“ checked”值更改为true / false，其余的应该在CSS中处理。
解决方案3
0 2018-06-26 07:40:26
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.