jquery - 使用 jquery 即时修改 CSS

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

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

我是想使用“[class]”来创建我的收藏集，还是有更巧妙的方法来提取包含字体大小的 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?