使用Javascript（Wordpress）操纵子主题的CSS

我想在我的网站上实现3个按钮，点击时可以改变字体大小

HTML将看起来像

<div class='normal_font_size'>ill put some image here</div>
<div class='medium_font_size'>ill put some image here</div>
<div class='big_font_size'>ill put some image here</div>

我使用此主题的子主题： 我的子主题文件夹中有一个style.css

我会把HTML放在子主题文件夹的page.php中，这样它就在我的标题下面，这是最佳做法吗

如何操作CSS

我的第一个问题是把Java代码放在哪里，这样CSS就会受到影响，因为我尝试了一些基本的操作，但到目前为止还没有做任何更改

*答：我将代码放入childtheme/js目录中的custom-script.js中，并将该脚本放入childtheme目录中的functions.php中。 从那里，我可以使用代码在我的childtheme的custom.css中操作css

我目前对JavaScript和Jquery的理解很可能与您的中文版本处于同一级别。 但是我想提高！这就是我来这里的原因

谢谢你的时间

*更新

@爱德华多：很不幸，你的代码对我不起作用，也许我把它放错地方了。。。正如我告诉过你的，我真的只是刚刚开始与一切不是HTML或CSS

这就是我的子主题的custom-script.js正确排队的方式，jQuery库正在加载，我将您的代码放在custom-script.js中。你说我应该把它放在main.js中，但到目前为止，这是我的子主题目录中唯一的.js

add_action( 'wp_enqueue_scripts', 'menu_scripts' );
function menu_scripts() {
wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script(
    'custom-script',
    get_stylesheet_directory_uri() . '/js/custom-script.js',
    array( 'jquery' )
);
        }

我做错了什么

**更新：

这段代码现在对我来说很好：

jQuery(document).ready(function(){
  jQuery('.mybutton').on('click', function() {
    jQuery('body').css('font-size','1000%');
  });
});

---

看起来是$-符号引起了麻烦。首先，Java和Javascript不是同一种语言

现在，您可能只需要使用jquery来选择按钮。例如：

In your page.php or index.php:
<button class="my-button">Small Font</button>

此外，您还可以将类添加到style.css中，然后使用jquery的.addClass在您希望字体增长的任何位置分配css类

您询问如何更改html标记以全局增加字体。首先，您不想标记html标记，只想标记主体。确保您了解html、head和body之间的基本区别

这就是为什么点击一个按钮，你会使你的文档正文中的所有字体增加100%

$('.mybutton').on('click', function() {

    $('body').css('font-size','100%');

}

在子主题的根目录中创建style.css。 在那里添加你所有的风格

如果内容仍然没有被拾取（尽管它应该被拾取），请将其添加到functions.php中：

如果需要，当然可以修改

编辑。 js无法工作的一个可能原因是它无法识别$。您必须记住Wordpress在无冲突模式下运行jQuery。 如果您使用：

jQuery(document).ready(function(){
    jQuery(#somefunction) ...
});

它可能会工作得很好。 但是，如果您确实想保留$notation，请将其包装如下：

(function($) {

    // Inside here $ = jQuery
    $( document ).ready(function() {
        console.log( "ready!" );
    });

})(jQuery);

---

好了，伙计们，现在一切正常。谢谢大家

这是我的代码，是这样的好还是我可以把它剪下来

下一个问题是将其保存在cookie中

HTML:

---

谢谢你，爱德华多。您知道如何使用jquery更改此元素的字体大小吗？html{font size:100%}我尝试了一些变体，但没有任何效果，即使我从JSFIDLE 1:1复制您的示例也不行。对于jquery、Java和所有这些东西，我真的是一个完全的初学者，所以我可以猜到问题一定在其他地方。我编辑了这篇文章，请检查你是否有耐心：美元似乎引起了一些问题，乔治的代码运行良好。无论如何，谢谢Eduardo$在代码中是JQuery的缩写。尝试学习在jQuery中使用$this，以及如何将元素存储在变量中以节省浏览器的大量处理。这是因为每次再次使用JQuery或$时，JQuery实际上都会再次遍历所有文档以查找您以前可能使用过的相同元素。使用jQuery还有无数其他方法可以提高效率，因此请确保您从编写高效代码开始，不要养成任何坏习惯。我想编写高效代码！在代码继续工作的同时，如何更有效地编写下面的代码？很明显，$不起作用，因为Wordpress以无冲突模式运行jQuery，正如George所描述的一样。你好，George，我已经在我的子主题中使用了style.css进行修改，它工作正常，我将代码放在里面。我认为问题在于jQuery或Java代码，或者是它的文件。您可以打印控制台中出现的任何错误吗。另外，是否可以查看您的.js文件？嘿，George，它正在工作，我现在将尝试使用相应的函数创建3个按钮，谢谢：

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

jQuery(document).ready(function(){
    jQuery(#somefunction) ...
});

(function($) {

    // Inside here $ = jQuery
    $( document ).ready(function() {
        console.log( "ready!" );
    });

})(jQuery);

<button class='body_standard_font_size'>Standard</button>
<button class='body_medium_font_size'>medium</button>
<button class='body_big_font_size'>big</button>

jQuery(document).ready(function(){
  jQuery('.body_standard_font_size').on('click', function() {
    jQuery('body').css('font-size','100%');
});
});
    jQuery(document).ready(function(){
  jQuery('.body_medium_font_size').on('click', function() {
    jQuery('body').css('font-size','150%');
});
});
        jQuery(document).ready(function(){
  jQuery('.body_big_font_size').on('click', function() {
    jQuery('body').css('font-size','200%');
});
});