Ir a la comunidad

Diseño y Programación Web

Comunidad oficial de diseñadores web, web developers y Webmasters. Aqui podemos tratar temas actuales sobre diseño y tecnología. Podemos compartir y actualizarnos. Flash, PHP, ASP, Java, HTML, CSS, MySQL, CMS, etc. Unite YA y lee los Sticky

Ver más
  • 17,217 Miembros
  • 12,963 Temas
  • 4,975 Seguidores
Hace más de 1 año
  • 0

[Solucionado] asignar ID con JavaScript

Hola gente, vuelvo a postear este tema, esta vez con un poco más de data para ver si alguien más puede ayudarme..

primero que nada, esto es lo que estoy haciendo..




todo funciona CASI perfecto.. el asunto es que el botón sumate! consta de 4 estados... normal, hover, active y un cuarto estado que seria el "presionado" por llamarlo de algún modo, acá lo pueden ver...





para el modo "presionado" intento asignarle un ID con JavaScript, pero no hay caso...

este es el codigo que tengo..


CSS

.botonSumate{
    width: 138px;
    height: 40px;
    position: relative;
    left: 57px;
    background: url(../img/sumate.png) no-repeat;
    background-position: 0 -3px;
}
.botonSumate:hover{
    background: url(../img/sumate.png) no-repeat;
    background-position: 0 -45px;
}
.botonSumate:active{
    background: url(../img/sumate.png) no-repeat;
    background-position: 0 -88px;
}
#botonPressed{
    width: 138px;
    height: 40px;
    position: relative;
    left: 57px;
    background: url(../img/sumate.png) no-repeat;
    background-position: 0 -132px;
}





HTML

<div id="barraBotones">
   <div class="botonSumate" onclick="mostrarOcultar()"></div>
</div>
<div id="sumate">
        bla bla bla...
</div>





Este es el script que se ejecuta en el onclick..

<script type="text/javascript">
            function mostrarOcultar(){
                var boxInputs = document.getElementById("sumate");
                if (boxInputs.style.display == "none"){
                    boxInputs.style.display = "block";
                    document.getElementByClassName("botonSumate")[0].setAttribute("id","botonPressed");
                }    else{
                        boxInputs.style.display = "none";
                        document.getElementByClassName("botonSumate")[0].setAttribute("id","");
                    }
            }
        </script>





Vale la aclaración de que si le escribo el ID manualmente al div, funciona... Pero no se porque no anda con el setAttribute


también probé lo siguiente:

document.getElementByClassName("botonSumate").id="botonPressed";



y esto también..

document.getElementByClassName("botonSumate")[0].setAttribute("background-position","0 - 132px");




y esto..

document.getElementByClassName("botonSumate").style.backgroundPosition(0 -132);
  • 0
  • 0Calificación
  • 0Seguidores
  • 509Visitas
  • 0Favoritos

14 comentarios

@pichoncitotv Hace más de 1 año
es mejor que utilizes clases, más para los botones, ya que podrías reutilizarlos, y de todas formas la mejor manera y sin javascript es usar sprites css, es muchisimo más sencillo!
@man_in_flames Hace más de 1 año
pichoncitotv dijo:

es mejor que utilizes clases, más para los botones, ya que podrías reutilizarlos, y de todas formas la mejor manera y sin javascript es usar sprites css, es muchisimo más sencillo!


pero estoy usando sprites.. ahi esta la imagen.. y clases para el boton tambien, el tema es que cuando le quiero asignar un id o una clase al boton, para que tenga como background la ultima imagen del sprite, no me funca..
@man_in_flames Hace más de 1 año
el javascript lo utilizo solo para activar el ultimo background.. y que quede asi mientras el display del div sea block, cuando vuelve a none tendria que pasar otra vez a su estado normal...
@jokerwin Hace más de 1 año
Eso de las clases que dice @pichoncitotv es cierto, acá te dejo el código fixeado:

En el CSS reemplaza todo por esto:


.botonSumate{
    width: 138px;
    height: 40px;
    position: relative;
    left: 57px;
    background: url(/img/sumate.png) no-repeat;
    background-position: 0 -3px;
}
.botonSumate:hover{
    background-position: 0 -45px;
}
.botonSumate:active{
    background-position: 0 -88px;
}
.botonSumate.active{
    background-position: 0 -132px;
}


La función queda así:


function mostrarOcultar(){
    var boxInputs = document.getElementById(&quot;sumate&quot;);
    if (boxInputs.style.display == &quot;none&quot;){
        boxInputs.style.display = &quot;block&quot;;
        document.getElementById(&quot;techo&quot;).setAttribute(&quot;class&quot;,&quot;botonSumate active&quot;);
    }
    else{
        boxInputs.style.display = &quot;none&quot;;
        document.getElementById(&quot;techo&quot;).setAttribute(&quot;class&quot;,&quot;botonSumate&quot;);
    }
}


Y al div del botón que ejecuta la función agrega un id, en el ejemplo ocupé techo...
@soloxd Hace más de 1 año
Creo que te falto la S a element
Quedaria asi:


 document.getElementsByClassName(&quot;botonSumate&quot;)
@man_in_flames Hace más de 1 año
muchas gracias @jokerwin! pero la respuesta era mucho mas sencilla...


soloxd dijo:

Creo que te falto la S a element
Quedaria asi:


 document.getElementsByClassName(&quot;botonSumate&quot;)



sos un grande @soloxd
y yo soy un colgado...
@soloxd Hace más de 1 año
Igual lo que te dijo pichon y joker tambien tenes que fijarte, por que en cada estado (:hover, :active) estas repitiendo el atributo background:url() cuando no hace falta ya que lo declaraste en la clase principal de ese elemento y ademas usa class no id
@man_in_flames Hace más de 1 año
si, ahora me voy a poner a arreglar esos detalles, pero me tenia preocupado que no funcionara el script..
@pichoncitotv Hace más de 1 año
claro, estás haciendo con javascript algo que podes lograr con pseudo-clases de css a eso quería llegar. existe :hover, :active, investigalas y verás que no es js necesario en el asunto.
@man_in_flames Hace más de 1 año
pichoncitotv dijo:

claro, estás haciendo con javascript algo que podes lograr con pseudo-clases de css a eso quería llegar. existe :hover, :active, investigalas y verás que no es js necesario en el asunto.


las estoy usando.. mira el codigo que puse en el tema..
@JMasip Hace más de 1 año
lo de presionado se llama :focus
@JMasip Hace más de 1 año
JMasip dijo:

lo de presionado se llama :focus


y tambien esta contemplado en css
@man_in_flames Hace más de 1 año
pero el focus me parece que es más para los inputs..
@soloxd Hace más de 1 año
JMasip dijo:

lo de presionado se llama :focus


Pero para los links el focus es practicamente lo mismo que los active
Tienes que ser miembro para responder en este tema