Question

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

我的最终结果是在我的页面上有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种不同的样式表。谢谢你的帮助！

Answer 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?

Answer 2

无需在项目中循环显示。它足以（重新）设置类的font-size值。例如，你可以这样做......

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);
    }

});

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

Answer 3

像这样使用：

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

Answer 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'
                 }) 
            }
        }

}

使用jquery动态修改CSS

4 个答案: