Recover ClassName using .Css () from AngularJS

Question

Recover ClassName using .Css () from AngularJS

Navigation

#1 by (2 votes)

1

I have a page that displays several divs that when clicked retrieves and displays the attributes used to create them: float , border , width , and so on.

I'd like to recover classname , but I'm not getting it.

Use or 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>

Example running Fiddle

angularjs

asked by anonymous 12.05.2015 / 16:56

1 answer

Highchart foot SQL: Can I have clauses in GroupBy that do not appear in Select?

score 2 · Accepted Answer

Jota, className is not a CSS property, but a DOM (javascript) property. To access this bia jQuery property, simply use the attr function. As follows:

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

Example running Fiddle