The style is specified in a selector based on attribute values for elements such as [data-value="1"], but the initial state is displayed correctly when viewed by IE8 (using IE Tester), but the display is not updated when changing attribute values for DOM from JavaScript.
Below is a simple sample.Each time you press the button, the data-value attribute should change and the Hello background color should change (from IE9 onwards, Chrome, Firefox, etc.).
It seems that the display is updated late when the mouse is removed from the top of the button, so I think it's just a problem that I can't redraw the screen. If anyone knows how to deal with this problem (reflected on the screen immediately when changing attribute values).
var val=0;
$('#btn').click(function(){
val=(val+1)%4;
$('#aaa').atttr('data-value',val);
});[data-value="0"]{
background:cyan;
}
[data-value="1"] {
background:red;
}
[data-value="2"] {
background:green;
}
[data-value="3"] {
background:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<divid="aaa" data-value="0">Hello</div>
<button id="btn">push</button>
According to our Stack Overflow response, it can be reflected by reconfiguring appropriate CSS properties and classes.
javascript-IE8 not refreshing class after attribute value change-Stack Overflow
Like the answer above, I think it's like this when you use opacity.IE11 IE8 mode worked.
var val=0;
$('#btn').click(function(){
val=(val+1)%4;
$('#aaa').attr('data-value',val).css('opacity',1);
});[data-value="0"]{
background:cyan;
}
[data-value="1"] {
background:red;
}
[data-value="2"] {
background:green;
}
[data-value="3"] {
background:blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<divid="aaa" data-value="0">Hello</div>
<button id="btn">push</button>
It seems to be a browser-induced movement.
css() changed the color.
var val=0;
$('#btn').click(function(){
val=(val+1)%4;
var color="";
switch(val){
case0:color="cyan";break;
case1:color="red";break;
case2:color="green";break;
case3:color="blue";break;
}
$('#aaa').css({'background':color});
});#aaa{
background:cyan;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<divid="aaa" data-value="0">Hello</div>
<button id="btn">push</button>
© 2024 OneMinuteCode. All rights reserved.