Geek asks and answers

Jquery css function does not use all arguments on map

In one of my webApp methods, I dynamically create html elements and add a dynamically created css object using this code:

    tag = typeof(tag) !== 'undefined' ? tag : "div";
    end = typeof(end) !== 'undefined' ? end : true;
    var html = '<'+tag+' value="'+this.id+'" class="element '+this.type+'"'+
                'style="position:absolute;z-index= '+this.id+'"'
    end ? html += "></"+tag+">" : html += "/>";
    var css = {},element = this;
    $.each(this.properties(),function(){
        var hash=this.indexOf("Color") !== -1?'#':'';
        var property = typeof(element[this])==='number'?element[this]*Nx.ratio:element[this];
        css[this]=hash+property;
    })
    console.log(css);
    html = $(html).css(css);
    $('.page[value='+page+']').append(html);

Here is an example css object taken from my console.log that was created and passed to the css () function:

Object
backgroundColor: "#ff0000"
borderColor: "#ffffff"
borderStyle: "solid"
borderWidth: "0"
height: "56.865"
left: "0"
top: "274.29"
width: "893.115"
__proto__: Object

now the problem is that the output element does not have the properties of the top, left, vertical and vertical values, for example:

<div value="12" class="element rectangle" style="position: absolute; background-color: rgb(255, 0, 0); left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-color: rgb(255, 255, 255); border-right-color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255); border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; "></div>
+3
source share
2 answers

These CSS properties do not apply to your element because you do not specify them properly. The values of left, top, widthand heightmust be:

  • Either a number, for example, 0or 274.29,
  • , , "0px" "274.29px".

, .

+2

- ... , , ; :

...'style="position:absolute;z-index= '+this.id+'"'; <-- there!

:

tag = typeof(tag) !== 'undefined' ? tag : "div"

:

 tag = tag || 'div'

, , this ...

$.each(this.properties(), function () {
    var hash = this.indexOf("Color") !== -1 ? '#' : '';
    var property = typeof(element[this]) === 'number' ? element[this] * Nx.ratio : element[this];
    css[this] = hash + property;
})

this.properties(). this this each(...)? ...

+2

More articles:


All Articles