I am new to javascript. try on changing the CSS style by javascript. I would like to add the style for the a tag under the specific p tag(.font_8), and the a tag already has some style.
the style I try to do is this, but I would like to add the style by javascript.
<style>
.font_8 a {
text-decoration: none;
color: red;
border-bottom: 2px dotted currentColor;
}
.font_8 a:hover {
border-bottom: 2px solid currentColor;
}
</style>
<p class="font_8" style="font-size:16px">text text text text<br>
<span style="text-decoration:underline"><a href="URL-link" target="_blank" rel="noreferrer noopener">link link link</a></span>（text）
</p>
<script>
function getElements(){
var font_8 = document.getElementsByClassName('font_8');
var elements = font_8.getElementsByTagName('a');
var len = elements.length;
for (var i = 0; i < len; i++){
elements[i].style = {
textDecoration: 'none',
color: 'red',
borderBottom: '2px dotted currentColor',
}
}
}
function getElements(){
var font_8 = document.getElementsByClassName('font_8');
var elements = font_8.getElementsByTagName('a');
var len = elements.length;
for (var i = 0; i < len; i++){
elements[i].addEventListener('mouseover', function() {
elements[i].style.borderBottom= '2px solid currentColor';
}
)
}
}
</script>
I don't think this is necessarily what you are going for. But I got the event listener adding the red line under the p tag and it adds the constant styles as well. I didn't know if you were trying to add it to the font_8 or the a tag since you were getting both of them before each loop.
I also added an mouseout event to get rid of the solid line.
const styles = {
textDecoration: 'none',
color: 'red',
borderBottom: '2px dotted currentColor',
}
function getElements() {
var elements = document.getElementsByClassName('font_8');
var len = elements.length;
for (let i = 0; i < len; i++) {
Object.keys(styles).forEach((key)=>{
elements[i].style[key]=styles[key]
})
}
for (let i = 0; i < len; i++){
elements[i].addEventListener('mouseover', function() {
elements[i].style.borderBottom= '2px solid currentColor';
})
elements[i].addEventListener('mouseout', function() {
Object.keys(styles).forEach((key)=>{
elements[i].style[key]=styles[key]
})
})
}
}
getElements()<p class="font_8" style="font-size:16px">text text text text
<br>
<span style="text-decoration:underline">
<a href="URL-link" target="_blank" rel="noreferrer noopener">link link link</a>
</span>
(text）
</p>I didn't know if you wanted to bring back the dotted or not, however. If you dont want to bring back the dotted line, you can just use the Object.keys method and put it in the mouseout function like:
elements[i].addEventListener('mouseout', function() {
elements[i].style.borderBottom= '';
})
You should replace all your len[i] with elements[i] (the len variable stores a number, the elements variable stores a list).
On line 14, the , should be an = I think (if you want to update the style of element[i]) :
for (var i = 0; i < len; i++) {
elements[i].style = {
textDecoration: 'none',
color: 'red',
borderBottom: '2px dotted currentColor',
}
}
And missing a closing bracket on line 27-28 (to close the for loop).