Question

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

这是我的链接：

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

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

帮助！我是JS新手！

这是我的功能：

function configurator(clicked) {

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

Answer 1

您可以为这样的元素设置样式：

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

要获取被点击的元素，您可以使用该事件：

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

来自quirksmode.org的示例函数。

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

编辑2 ：一个jQuery示例。

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

Answer 2

如果你的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);   
}

修改

还注意到你错过了“a”标签。它应该是：

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

Answer 3

上面的例子有一些问题，我试图尽我所能清理它。这是我测试过的代码，它本身就可以运行。它不漂亮，但它有效：

<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

您可以使用Element.addEventListener()来实现此目标。

这是完全未经测试但它应该给你一些方向。通过传递整个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); 
}

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

使用document.getElementById(clicked);获取已发送的ID，然后您可以将样式设置为此。您错过了a标记，并且您传递的元素名称不是ID。

Javascript：如何获取单击链接的ID，然后在css中设置样式

5 个答案: