使用 jquery 即时修改 CSS答案

【问题标题】：Modifying CSS on the fly using jquery使用 jquery 即时修改 CSS
【发布时间】：2013-12-27 08:18:55
【问题描述】：

我已经阅读了很多关于动态样式的类似请求的答案，但我仍有一些问题。

我的最终结果是在我的页面上有 2 个按钮，允许用户增加或减少字体大小。这个我看过了，好像没那么复杂……

我的 C# 项目正在使用 .less 和 jquery 1.10.1。

var items = $('[class]').css('font-size');

$(items).each(function(index){        
    alert('Text:' + $(this).text());        
    $(this).css('font-size') =($(this).css('font-size').val() * 6) ;         
});

我希望 items 集合将包含具有 font-size CSS 属性的 DOM 元素。我想采用当前大小并对其应用一些乘数。在这种情况下，为了更明显，我将当前值乘以 6。此代码位于通过单击按钮调用的函数中。使用此功能中的简单警告框，单击即可工作。此代码不起作用。

我想使用 '[class]' 来创建我的集合，还是有更巧妙的方法来提取包含 font-size 的 css 类？

这是必须在每个页面上完成的事情，还是 css 值被缓存在某个地方？

有没有更简单的方法来做到这一点？如果不需要，我不想拥有 3 个不同的样式表。感谢您的帮助！

【问题讨论】：

.val() 用于获取输入元素的值。你为什么在这里使用它？
用 jquery 改变 CSS，你用两个参数调用 .css()，你不使用赋值。
不要忘记大小包含px、em 等后缀。您需要在乘以大小之前将其拆分。
看来你真的需要回顾一下jQuery是如何工作的，这些错误意味着很多误解。
要查找具有 font-size 属性的所有内容，应为 $('[style*=font-size]')。

标签： jquery css dynamic less

【解决方案1】：

html：

<p style="font-size: 6px">test</p>
<p style="font-size: 6em">test</p>
<button id="resize">resize</button>

javascript:

$('#resize').click(
function(){
var fonts = $('[style*="font-size"]').each(function() {
    $(this).css('font-size',(parseFloat($(this).css('font-size'))*6)+'px');
});

注意 1，如果您可以使用 @kasper-taeymans 建议的类，请考虑创建 small 和 big 类并应用 jQuery 的 addClass() 和 removeClass() 来更改单击事件上的类。

注意 2 因为您提到使用 LESS，如果您编译您的 LESS 代码客户端（通过包含 less.js），您不应该这样做，另请阅读：Changing variable dynamically (at runtime) via LESS and CSS?

【讨论】：

是的（注 1：点击切换类）将是最好/最快的解决方案。
跨页面保留此字体大小 addClass() 的最佳方法是什么？一些简单的事情，还是我需要涉及更多代码？我正在使用 MVC，我可以使用 js 来修改具有字体大小（小、中、大或至高无上）的隐藏字段。加载新页面时，我可以检查模型并动态关联 css 类。想法？

【解决方案2】：

无需显式循环遍历项目。它足以（重新）设置类的字体大小值。例如你可以做这样的事情......

http://jsfiddle.net/kasperfish/5bdbQ/5/

var maxsize=24;
var minsize=6;

$('#sizeup').on('click', function(){
    var el=$('.adjustablefontsize');
    var currentsize=parseInt(el.css('font-size'));
    if(currentsize<maxsize){
        el.css('font-size',currentsize+4);
    }


});

$('#sizedown').on('click', function(){
    var el=$('.adjustablefontsize');
    var currentsize=parseInt(el.css('font-size'));
    if(currentsize>minsize){
        el.css('font-size',currentsize-4);
    }

});

编辑：更新了我的答案（设置允许的最小和最大字体大小）

【讨论】：

想提一下，最好将类（最小、小、普通、大……）添加到您的 css 文件中，然后在单击按钮时在这些类之间切换。就像 Bass Jobsen 所建议的那样。

【解决方案3】：

像这样使用它：

$(this).css('font-size', ($(this).css('font-size') * 6) + 'px'));

【讨论】：

【解决方案4】：

这是一个潜在的解决方案（这里是jsfiddle）：

<button class="up">+</button>
<button class="down">-</button>

<div>Some text</div>
<div>Some more text</div>
<div>Even more text</div>


$('button.up').on('click',function() {
    changeFontSize('up',38,'div');
});

$('button.down').on('click',function() {
    changeFontSize('down',16,'div');
});


//using so many parameters for the sake of being able to potentially use this function on multiple elements with different min and max sizes

//the limit variable is either a lower or upper limit of size

function changeFontSize(x,lim,el) {
    var direction = x,
        limit = lim,
        currentSize = parseInt($(el).css('font-size'));

        if(direction === "up") {
            if(currentSize<limit) {
                 $(el).css({
                     'font-size':(currentSize+6)+'px'
                 })
            }
        } else if (direction === "down") {
            if(currentSize>limit) {
                 $(el).css({
                     'font-size':(currentSize-6)+'px'
                 }) 
            }
        }

}

【讨论】：