革新的な jQuery メソッド: Web ページのスタイルを変革します。

// HTML部分
<button id="theme1">主题1</button>
<button id="theme2">主题2</button>

// jQuery部分
$('#theme1').click(function() {
    $('body').css('background-color', 'lightblue');
});

$('#theme2').click(function() {
    $('body').css('background-color', 'lightgreen');
});

// HTML部分
<button id="increaseSize">增大字体</button>
<button id="decreaseSize">减小字体</button>

// jQuery部分
$('#increaseSize').click(function() {
    var currentSize = parseInt($('body').css('font-size'));
    $('body').css('font-size', currentSize + 2);
});

$('#decreaseSize').click(function() {
    var currentSize = parseInt($('body').css('font-size'));
    $('body').css('font-size', currentSize - 2);
});

// HTML部分
<img  src="image1.jpg" class="hoverEffect" alt="革新的な jQuery メソッド: Web ページのスタイルを変革します。" >
<img  src="image2.jpg" class="hoverEffect" alt="革新的な jQuery メソッド: Web ページのスタイルを変革します。" >

// jQuery部分
$('.hoverEffect').hover(function() {
    $(this).css('opacity', '0.5');
}, function() {
    $(this).css('opacity', '1');
});