javascript - How do I get the id of a clicked link and then style it in CSS - Stack Overflow

admin管理员组

文章数量:1410717

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);  
}

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);  
}

• javascript
• css
• events
• dom-events

Share Improve this question Follow edited Jun 16, 2022 at 6:35 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Dec 17, 2010 at 17:55 sehummelsehummel 5,5682525 gold badges9292 silver badges141141 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

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);   
} 

EDIT:

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> 

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.

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

EDIT 2: A jQuery example.

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

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>

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

This is pletely 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); 
} 

<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.

本文标签： javascriptHow do I get the id of a clicked link and then style it in CSSStack Overflow