1

Tenho uma página que exibe várias divs que ao serem clicadas recupera e exibe os atributos utilizados para criá-las: float, border, width e etc.

Gostaria de recuperar o classname, porém não estou conseguindo.

Uso o AngularJS 1.2.1.

HTML:

<h2>Clique nas DIV´s para exibir os atributos do CSS</h2>

<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
<p class="clear"></p>
<p id="result">&nbsp;</p>

Script:

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
$("div").click(function () {
    var html = ["<strong>A DIV selecionada possui os seguintes atributos:</strong>"];

    var styleProps = $(this).css(["classname","float", "border",
        "width", "height", "color", "background-color"]);
    $.each(styleProps, function (prop, value) {
        html.push(prop + ": " + value);
    });

    $("#result").html(html.join("<br>"));
});
}//]]>  

</script>

Exemplo funcionando Fiddle

1 Resposta 1

2

Jota, className não é uma propriedade CSS, mas sim uma propriedade do DOM (javascript). Para acessar esta propriedade bia jQuery, basta usar a função attr. Conforme segue:

HTML:

<h2>Clique nas DIV´s para exibir os atributos do CSS</h2>

<div id="box1" class="cname">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
<p class="clear"></p>
<p id="result">&nbsp;</p>

Script:

$(function(){
    $("div").click(function () {
        var html = ["<strong>A DIV selecionada possui os seguintes atributos:</strong>"];

        var styleProps = $.extend({ classname: $(this).attr('class') || '' }, 
            $(this).css(["float", "border", "width", "height", "color", "background-color"])
        );
        console.log(styleProps);
        $.each(styleProps, function (prop, value) {
            html.push(prop + ": " + value);
        });

        $("#result").html(html.join("<br>"));
    });

    alert($("div").css('classname'));
})

Exemplo funcionando Fiddle

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .