MCGuy MCGuy - 5 months ago 9
CSS Question

How does .attr method work(I don't understand the API)

Hey there!

I was just trying to get an id and I tried using the

.attr
method. It didn't seem to work. How does the
.attr
method(Is it a method?) anyway? Here's the code that doesn't work.

HTML:

<div class="buttons">
<div id="bgS">
<button id="Easy" onmouseover="rolloverb1()" onmouseout="rolloverb2()" value="Javascript" href = "#">Easy</button>
<button id="Intermediate" onmouseover="rolloveri1()" onmouseout="rolloveri2()" value="Css" href="#">Intermediate</button>
<button id="Advanced" onmouseover="rollovera1()" onmouseout="rollovera2()" value="Html" href="#">Advanced</button>
</div>


jQuery:

function rolloverb2() {
var jbutton = document.getElementById("Easy");

jbutton.style.backgroundColor = "#090";
$(document).ready(function(){
$('#Easy').css("transition", "0.5s").attr('button');
});
}


That's not all of it, but just the main parts of it. Maybe it's a sytax error... maybe it's not. Thanks.

EDIT: I added the function and what I'm really trying to do is change the transition of the color now.

Answer

attr() gets or sets that attribute.

If you want to know the ID of <button id="Easy"> you can get it:

$('#Easy').click(function(){
   var tmp = $(this).attr('id');
   alert(tmp);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="Easy">Easy button</button>

What you want to do is to set the color of the #Easy element:

$(document).ready(function(){
    $('#Easy').attr('id').css({
        "background-color":"red"                      
    });
});

$('button').hover(
  function(){
     //rolloverB1()
     $(this).css('background','pink');
  },
  function(){
     //rolloverb2()
    $(this).css('background','white');
  }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="buttons">
  <div id="bgS">
    <button id="Easy" onmouseover="rolloverb1()" onmouseout="rolloverb2()" value="Javascript" href = "#">Easy</button>                              
    <button id="Intermediate" onmouseover="rolloveri1()" onmouseout="rolloveri2()" value="Css" href="#">Intermediate</button>
    <button id="Advanced" onmouseover="rollovera1()" onmouseout="rollovera2()" value="Html" href="#">Advanced</button>
  </div>