Question

我在尝试使用.js文件中的jQuery删除css属性时遇到了一些问题：

 generateContent: function (point) {
    $(".gm-style-iw .table-round .rows .col").css({ 'transform' : 'none !important' });
        var key = point.key;
        var area = point.area;
        var update = point.update;
        var carparks = point.carparks;

        var content = '<div class="table-round"><div class="header">' + area + '</div><div class="rows"><div class="row row-header"><div class="col center">Development</div><div class="col center">Available Lots</div></div>';
        for (var key2 in carparks) {
            var carpark = carparks[key2];
            var name = carpark.name;
            var lots = carpark.lots;
            var objectId = carpark.objectId;

            content += '<div class="row"><div class="col">' + name + '</div><div id="rtpLot' + objectId + '" class="col center bold">' + lots + '</span></div>';
        }
        content += '</div><div class="footer">Last updated: <span class="lastUpdate">' + update + '</span></div></div>';
        return content;
    },

我的css课看起来像这样：

.gm-style-iw .table-round { padding: 15px 20px; width: 300px; }
.gm-style-iw .table-round .header { font-size: 32px; font-weight: bold; margin: 0 0 15px; }
.gm-style-iw .table-round .rows { color: #333; background: #eee; }
.gm-style-iw .table-round .rows .row { border-top: 1px solid #fff; }
.gm-style-iw .table-round .rows .row-header { background: #495b67; }
.gm-style-iw .table-round .row-header .col { color: #fff; font-weight: bold; } 
.gm-style-iw .table-round .rows .col { display: inline-block; padding: 10px 15px; width: 120px; font-size: 18px; position: relative; top: 50%; transform: translate(-50%,-50%); vertical-align: top; }
.gm-style-iw .table-round .rows .bold { font-weight: bold; }
.gm-style-iw .table-round .rows .center {  text-align: center; }
.table-round .footer { font-size: 13px; font-style:italic; text-align: right; padding: 10px 0 0; background-color: #FFF; }

基本上它完全适用于Chrome但不适用于IE。我想知道为什么会这样？

提前致谢。

修改

var content = '<div class="table-round"><div class="header">' + area + '</div><div class="rows"><div class="row row-header"><div class="col center">Development</div><div class="col center">Available Lots</div></div><div></div>';
        for (var key2 in carparks) {
            var carpark = carparks[key2];
            var name = carpark.name;
            var lots = carpark.lots;
            var objectId = carpark.objectId;

            content += '<div class="row"><div class="col">' + name + '</div><div id="rtpLot' + objectId + '" class="col center bold">' + lots + '</div></div>';
        }
        content += '<div class="footer">Last updated: <span class="lastUpdate">' + update + '</span></div>';
        return content;

Answer 1

您的HTML格式不正确，这是一个修复：

    var content = '<div class="table-round">' +
                       '<div class="header">' + area + '</div>' +
                       '<div class="rows">' +
                           '<div class="row row-header">' +
                               '<div class="col center">Development</div>' +
                               '<div class="col center">Available Lots</div>' +
                           '</div>';
    for (var key2 in carparks) {
        var carpark = carparks[key2];
        var name = carpark.name;
        var lots = carpark.lots;
        var objectId = carpark.objectId;

        content += '<div class="row">' +
                        '<div class="col">' + name + '</div>' +
                        '<div id="rtpLot' + objectId + '" class="col center bold">' + lots + '</div>' +
                   '</div>';
    }
    content += '</div>' +
        '<div class="footer">Last updated: <span class="lastUpdate">' + update + '</span></div>' +
    '</div>';
    return content;
},

对于你的CSS，你可以尝试：

$(".gm-style-iw .table-round .rows .col").css({ '-ms-transform' : 'none !important' });

OR：

$(".gm-style-iw .table-round .rows .col").attr('style', function(i,s) { return s + 'transform: none !important; -ms-transform: none !important;' });

OR：

$('.gm-style-iw .table-round .rows .col').css('cssText', 'transform: none !important');

使用jQuery删除css属性

1 个答案: