Javascript: Как я могу получить идентификатор кликаемой ссылки, а затем оформить ее в CSS - PullRequest
Новая
       4

Javascript: Как я могу получить идентификатор кликаемой ссылки, а затем оформить ее в CSS

0 голосов
/ 17 декабря 2010

Как оформить нажатую ссылку с помощью CSS в Javascript?

Вот моя ссылка: 

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

Я пытаюсь запустить функцию с именем configurator и вернуть идентификатор этой ссылки, чтобы я мог установить CSS.

Помощь! Я новичок в JS!

Вот моя функция: 

function configurator(clicked) {

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

Ответы [ 5 ]

1 голос
/ 17 декабря 2010

Если ваша функция onClick называется «configurator (this);», то вы передали ей сам элемент, а не его идентификатор. 

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:

Также только что заметил, что вам не хватает тега "a". Должно быть: 

<li><a id="106" onClick="configurator(this)" href="#">10.6 &micro;</a><li>
1 голос
/ 17 декабря 2010

Вы можете стилизовать элемент следующим образом: 

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 .

EDIT : Другое дело: не рекомендуется добавлять свойства onclick непосредственно в html.Вы можете использовать ненавязчивый java script .

EDIT 2 : пример jQuery. 

$(function() // Alias for $(document).ready()
{
    $('li a').click(function()
    {
        $(this).css({
            color: 'red'
        });
    });
});
0 голосов
/ 18 декабря 2010 
<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);, чтобы получить отправленный идентификатор, а затем вы можете установить стили для этого. Вы пропустили тег a и передавали имя элемента, а не ID.

0 голосов
/ 17 декабря 2010

Вы можете использовать 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); 
}
0 голосов
/ 17 декабря 2010

В приведенном выше примере есть несколько проблем, я попытался очистить его как можно лучше. Вот код, который я протестировал, который работает сам по себе. Это не красиво, но работает: 

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

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