AngularJS-Css()

Udo da função .css()

by Jothaz

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<h2>Clique nas DIV´s para exibir os atributos do CSS</h2>

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

CSS

div {
     height: 50px;
     margin: 5px;
     padding: 5px;
     float: left;
 }
 #box1 {
     width: 50px;
     color: yellow;
     background-color: blue;
     border: solid 2px black;
 }
 #box2 {
     width: 80px;
     color: rgb(255, 255, 255);
     background-color: rgb(15, 99, 30);
 }
 #box3 {
     width: 40px;
     color: #fcc;
     background-color: #123456;
 }
 #box4 {
     width: 70px;
     background-color: #f11;
 }
.clear{
    clear:both;
}

JavaScript

$(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>"));
    });
})

$( "div" ).bind( "click", function( event ) {
  var str = "( " + event.pageX + ", " + event.pageY + " )";
    $( "span" ).text( "Pos: " + str );
});