如何获取点击链接的 id，然后在 CSS 中设置样式

Question

How do I style a clicked link with CSS in JavaScript?

Here is my link:

<li><id="106" onClick="configurator(this)" href="#">10.6 &micro;</a><li>

I am trying to run a function called configurator and return the ID of the this link so I can set the CSS.

Help! I am a JS newbie!

Here is my function:

function configurator(clicked) {
 
 document.getElementById(clicked);
 alert(clicked.name);  
}

Answer 1

You can style an element like this:

element.style.color = 'white';
element.style.backgroundColor = 'red';

To get the element which was clicked you could use the event:

function doSomething(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
}

Example function from quirksmode.org .

EDIT : Other thing: It's bad practice to add onclick properties directly to the html. You could use unobtrusive java script .

EDIT 2 : A jQuery example.

$(function() // Alias for $(document).ready()
{
    $('li a').click(function()
    {
        $(this).css({
            color: 'red'
        });
    });
});

Answer 2

If your onClick function is called as "configurator(this);", then you passed it the element itself, not the ID of the element.

function configurator(clicked) { 

// document.getElementById(clicked); // doesn't work because "clicked" is an element, not an ID
 clicked.style.fontWeight = "bold";
 // OR
 clicked.className = "boldClass";
 alert(clicked.name);   
} 

Also just noticed that you are missing the "a" tag. It should be:

<li><a id="106" onClick="configurator(this)" href="#">10.6 &micro;</a><li> 

Answer 3

There are a few problems with the above example, I've tried to clean it up as best I can. Here's code that I tested, that works by itself. It's not pretty, but it works:

<li><a href="#" id="106" onClick="configurator(this)">10.6 &micro;</a></li>

<script type="text/javascript">
    function configurator(clicked) {
         alert(clicked.id);
    }
</script>

Answer 4

You can use Element.addEventListener() to achieve this.

This is completely untested but it should give you some direction. Passing the whole css object came to me on the fly, you could alternatively omit this and hardcode the styles you are trying to change (but why would you wanna do that =P).

// Function to change the content of t2
function modifyStyle(styles) {
   //save element
   var that = this;
   for each (property in styles){
      that.style.property = styles[property];
   }  
}

// Function to add event listener anchor
function load() { 
  var el = document.getElementById("myAnchor"),
  cssObj = {
      background-color: 'black',
      font-size: 1.2em
  }
  //set the function call to an anonymous function that passes your css object
  el.addEventListener("click", 
                      function(){modifyStyle(cssObj)}, 
                      false); 
} 

Answer 5

<li><a id="106" onClick="configurator(this.id)" href="#">10.6 &micro;</a><li> 

function configurator(clicked) 
{  

 var elementClicked = document.getElementById(clicked); 
 //Set the styles using the ID element.clicked.style......
 alert(clicked);   
} 

Use document.getElementById(clicked); to get the sent ID and then you can set the styles to this. You missed out the a tag, and you was passing the element name not ID.