如何通过在HTML标签上获取属性来更改CSS属性？

Question

I need to write this in Javascript but I'm a noob. Already looked for help on www.w3schools.com but it seems it will take an era to find out this simple answer.

if (some 'a' tag has this href attribute 'href="http://www.mysite.com.br"') {
    style="display:none;"
}

Thank you.

Answer 1

CSS solution (applies by default to all matching elements)

a[href="http://www.mysite.com.br"] { 
  display: none;
}

Javascript solution (can be triggered on events)

var links = document.querySelectorAll('a[href="http://www.mysite.com.br"]')
links.forEach(function (element) {
  element.style.display = 'none'
})

Answer 2

You can simply loop through all a tags and hide the one with the href you want.

 $('a').each(function(){ if($(this).attr('href') == "http://www.mysite.com.br") { $(this).css('display',"none"); } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="http://example.com">Example</a> <a href="http://www.mysite.com.br">this should be hidden</a> <a href="http://example2.com">Example 2</a> <a href="http://example3.com">Example 3</a> 

UPDATE

If you do not use jQuery then use the core JS approach:

 var elements = document.querySelectorAll('a[href="http://www.mysite.com.br"]'); for (var i = 0; i < elements.length; ++i) { elements[i].style.display = "none"; } 

 <a href="http://example.com">Example</a> <a href="http://www.mysite.com.br">this should be hidden</a> <a href="http://example2.com">Example 2</a> <a href="http://example3.com">Example 3</a> 

Answer 3

You could use the CSS [attribute=value] Selector

 a[href="http://www.google.de/"] { color: red; } 

 <p> Hello </p> <a href="http://www.google.de/">Hello</a> <span>Hello</span> 

Answer 4

You should select the result using a query selector. Assuming you want to use vanilla js and not jquery it will be something like:

var elements = document.querySelectorAll('a[href="yoursite"]');

and then loop over the results:

for (var i = 0; i < elements.length; ++i) {
  elements[i].style.display = "none";
}

Hope this helps.

Answer 5

First select your a tag using document.querySelector then using getAttribute() check whether it consist of any url or not, if true then hide a tag , as below,

 var a = document.querySelector("a"); var b = a.getAttribute("href"); console.log(b); if(b == "http://www.mysite.com.br"){ a.style.display = "none"; } 

 <a href="http://www.mysite.com.br">Link</a>