Javascript：如何获取单击的链接的 id，然后在 css 中对其进行样式设置

Javascript: How do I get the id of a clicked link and then style it in css

提问by sehummel

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

如何在 Javascript 中使用 CSS 设置点击链接的样式？

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.

我正在尝试运行一个名为 configurator 的函数并返回此链接的 ID，以便我可以设置 css。

Help! I am a JS newbie!

帮助！我是JS新手！

Here is my function:

这是我的功能：

function configurator(clicked) {

 document.getElementById(clicked);
 alert(clicked.name);  
}

回答by joksnet

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.

来自quirksmode.org 的示例函数。

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

编辑：其他事情：将 onclick 属性直接添加到 html 是不好的做法。您可以使用不显眼的java脚本。

EDIT 2: A jQuery example.

编辑 2：一个 jQuery 示例。

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

回答by Travesty3

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

如果您的 onClick 函数被称为“configurator(this);”，那么您将元素本身传递给它，而不是元素的 ID。

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:

也只是注意到您缺少“a”标签。它应该是：

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

回答by Elliott

<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 atag, and you was passing the element name not ID.

使用document.getElementById(clicked);得到发送的ID，然后你可以设置的样式了这一点。你错过了a标签，你传递的是元素名称而不是 ID。

回答by Nathan Garabedian

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>

回答by Derek Adair

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

您可以使用Element.addEventListener()来实现这一点。

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

这是完全未经测试的，但它应该给你一些指导。将整个 css 对象即时传递给我，您也可以省略它并硬编码您要更改的样式（但为什么要这样做 =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); 
}