我想动态更改CSS值，而不需要根据输入对每个值进行硬编码。以下是我目前所拥有的，虽然它完成了我想要它做的事情 - 我不禁感到它的超级hacky和不可扩展。我是否偏离了我正在做的事情，是否有一种更好的方法来完成改变未确定数量的元素的CSS。
对于这个用例..我正在使用jquery的animate函数增加美元金额，并在达到特定字符长度时将CSS缩放应用到该数量。
/**
* Updates the ticker CSS based on the ticker ID and the total number of digits in the <span></span> including all signs, decimals, and commas.
* @param {string} direction - up or down. are we scaling up or are we scaling down
* @param {int} id - the ID of the parent div (do not include a hashbang)
* @param {int} length - length of the string inside the <span></span> - includes $,.
*/
function updateCSS(direction, id, length) {
var $parent = $('#' + id);
var $span = $parent.find('span');
/** RESET CSS PROPERTIES */
if (direction === 'down') {
// RESET FOR BIG COUNTER
if (id === 'prog_01w') {
if (length < 15) {
//14
$span.css({'zoom':'0.50'});
if (length < 12) {
//11
$span.css({'zoom':'0.60'});
if (length < 11) {
//10
$span.css({'zoom':'0.68'});
if (length < 10) {
//9
$span.css({'zoom':'0.75'});
if (length < 9) {
//8
$span.css({'zoom':'0.80'});
if (length < 8) {
//7
$span.css({'zoom':'0.9'});
if (length < 7 ) {
//6
$span.css({'zoom':'1.0'});
}
}
}
}
}
}
}
} else {
// RESET FOR SMALL COUNTERS
if (length < 12) {
//11
$parent.css('margin-top', '-40px');
$span.css({'zoom':'0.55'});
if (length < 10) {
//9
$parent.css('margin-top', '-40px');
$span.css({'zoom':'0.60'});
if (length < 8) {
//7
$parent.css('margin-top','-20px');
$span.css({'zoom':'0.80'});
if (length < 7) {
//6
$parent.css('margin-top','-10px');
$span.css({'zoom':'0.9'});
if (length < 5) {
//5
$parent.css('margin-top', '0px');
$span.css({'zoom':'1.0'});
}
}
}
}
}
}
} else {
/** ADD LESS ZOOM TO PROPERTIES SO THEY SHRINK AS THE NUMBER LENGTH GETS BIGGER */
if (id === 'prog_01w') {
// ZOOM FOR BIG COUNTER
if (length > 6) {
//7
$span.css({'zoom':'0.9'});
if (length > 7) {
//8
$span.css({'zoom':'0.80'});
if (length > 8) {
//9
$span.css({'zoom':'0.75'});
if (length > 9) {
//10
$span.css({'zoom':'0.68'});
if (length > 10) {
//11
$span.css({'zoom':'0.60'});
if (length > 12) {
//13
$span.css({'zoom':'0.50'});
}
}
}
}
}
}
} else {
// ZOOM FOR SMALL COUNTERS
if (length > 5) {
//6
$parent.css('margin-top', '-10px');
$span.css({'zoom':'0.9'});
if (length > 6) {
//7
$parent.css('margin-top','-20px');
$span.css({'zoom':'0.8'});
if (length > 7) {
//8
$parent.css('margin-top','-40px');
$span.css({'zoom':'0.6'});
if (length > 8) {
//9
$parent.css('margin-top','-40px');
}
}
}
}
}
}
}
这是我使用jQuery更新CSS的另一个例子。这里我根据数组长度手动指定每个属性值。我这样做，所以我可以使目录列表垂直响应。我想清理这些代码并使用某种算法“动态”地完成它。
$('#col1').html(col1_html);
$('#col2').html(col2_html);
console.log('length', length);
if (length === 1) {
//only one to show, so put it in the directory instead of in the column then apply justify-content:space-around and set tenant width to 50%
$('#col1').html('');
$('#directory').html(col1_html);
$('.tenant').css({'padding': '80px 0 80px 0', 'width': '50%'});
$('.occupant').css({'padding': '70px 0 70px 0'});
$('.header').css({'padding':'170px 0 160px 0', 'margin': '0 88px 160px 88px', 'font-size': '82px'});
$('#directory').css({'padding-bottom':'160px','border-bottom':'3px solid #FFF','justify-content':'space-around'});
} else if (length === 2) {
$('.tenant').css({'padding': '80px 0 80px 0'});
$('.occupant').css({'padding': '0 0 0 0'});
$('.header').css({'padding':'170px 0 140px 0', 'margin': '0 88px 80px 88px', 'font-size': '82px'});
$('#directory').css({'padding-bottom':'110px','border-bottom':'3px solid #FFF'});
} else if (length === 3) {
} else if (length === 4) {
$('.tenant').css({'padding': '55px 0 55px 0'});
$('.occupant').css({'padding': '0px 0 0px 0'});
$('.header').css({'padding':'100px 0 100px 0', 'margin': '0 88px 50px 88px', 'font-size': '82px'});
$('#directory').css({'padding-bottom':'50px','border-bottom':'3px solid #FFF'});
} else if (length === 5) {
$('.tenant').css({'padding': '45px 0 45px 0'});
$('.occupant').css({'padding': '40px 0 40px 0'});
$('.header').css({'padding':'100px 0 80px 0', 'margin': '0 88px 80px 88px', 'font-size': '75px'});
$('#directory').css({'padding-bottom':'80px','border-bottom':'3px solid #FFF'});
} else if (length === 6) {
$('.tenant').css({'padding': '40px 0 40px 0'});
$('.occupant').css({'padding': '0px 0 0px 0'});
$('.header').css({'padding':'100px 0 80px 0', 'margin': '0 88px 60px 88px', 'font-size': '75px'});
$('#directory').css({'padding-bottom':'60px','border-bottom':'3px solid #FFF'});
} else if (length === 7) {
$('.tenant').css({'padding': '40px 0 40px 0'});
$('.occupant').css({'padding': ' 0 0 35px 0'});
$('.header').css({'padding':'100px 0 80px 0', 'margin': '0 88px 60px 88px', 'font-size': '75px'});
} else if (length === 8) {
$('.tenant').css({'padding': '40px 0 40px 0'});
$('.occupant').css({'padding': ' 0 0 0px 0'});
$('.header').css({'padding':'100px 0 80px 0', 'margin': '0 88px 60px 88px', 'font-size': '75px'});
} else if (length === 9) {
$('.tenant').css({'padding': '25px 0 25px 0'});
$('.occupant').css({'padding': '0px 0 0px 0'});
$('.header').css({'padding':'90px 0 60px 0', 'margin': '0 88px 60px 88px', 'font-size': '72px'});
} else if (length === 10) {
$('.tenant').css({'padding': '25px 0 25px 0'});
$('.occupant').css({'padding': '0px 0 0px 0'});
$('.header').css({'padding':'90px 0 60px 0', 'margin': '0 88px 60px 88px', 'font-size': '72px'});
} else if (length === 11) {
$('.tenant').css({'padding': '25px 0 25px 0'});
$('.occupant').css({'padding': '0px 0 0px 0'});
$('.header').css({'padding':'90px 0 60px 0', 'margin': '0 88px 60px 88px', 'font-size': '72px'});
} else if (length === 12) {
$('.tenant').css({'padding': '15px 0 15px 0'});
$('.occupant').css({'padding': '0px 0 0x 0'});
$('.header').css({'padding':'90px 0 50px 0', 'margin': '0 88px 50px 88px', 'font-size': '72px'});
} else if (length === 13) {
$('.tenant').css({'padding': '15px 0 15px 0'});
$('.occupant').css({'padding': '0px 0 0x 0'});
$('.header').css({'padding':'90px 0 50px 0', 'margin': '0 88px 50px 88px', 'font-size': '72px'});
} else if (length === 14) {
$('.tenant').css({'padding': '15px 0 15px 0'});
$('.occupant').css({'padding': '0px 0 0x 0'});
$('.header').css({'padding':'90px 0 50px 0', 'margin': '0 88px 50px 88px', 'font-size': '72px'});
} else if (length === 15) {
} else if (length === 16) {
$('.tenant').css({'padding': '12px 0 12px 0'});
$('.occupant').css({'padding': '0px 0 0px 0'});
$('.header').css({'padding':'70px 0 65px 0', 'margin': '0 88px 65px 88px', 'font-size': '72px'});
} else if (length === 17) {
$('.tenant').css({'padding': '10px 0 10px 0'});
$('.occupant').css({'padding': '0px 0 0px 0'});
$('.header').css({'padding':'70px 0 45px 0', 'margin': '0 88px 55px 88px'});
} else if (length >= 18) {
$('.tenant').css({'padding': '9px 0 9px 0'});
$('.occupant').css({'padding': '0px 0 5px 0'});
$('.header').css({'padding':'70px 0 45px 0', 'margin': '0 88px 45px 88px'});
}
$('#col1 .tenant .occupant').css('padding-left','50px');
$('#col2 .tenant .occupant').css('padding-left','150px');
if (length > 1) {
$('#col1').css({'border-right':'3px solid rgba(255,255,255,0.5)'});
}
$('#col1 .tenant .suiteNumber').css({'padding-right':'100px'});
$('#col2 .tenant .tenantName').css({'padding-left':'100px'});