使用按钮更改字体大小

Question

我试图用一个按钮更改我博客上 post 的字体大小... 像这样：

<p><a href="#" onclick="document.body.style.fontSize='x-large';">BIG</a></p>

问题是，除了 post 文本之外的所有其他文本的大小都会发生变化。

我认为问题在于 post 中的文本位于以下标记之间：

 <span style="font-size: large;">Blah blah blah</span>

因此，可以使用按钮将此文本的大小更改为 "large"、"x-large" 和 "xx-large"?

Answer 1

因此 CSS 中的特异性工作方式将内联样式视为最重要的因素（除了 !important 之外，应尽可能避免）。

在您的情况下，内联样式优先，因为它具有最高的特异性，因此您无能为力以覆盖该样式。我的建议是开始探索 classes 在 CSS 中的使用，并可能在单击时将不同的 class 分配给博客 post。

简单如：

.largeText {
  font-size: large;
}

.xLargeText {
  font-size: x-large;
}

可能有用。我会让你弄清楚如何利用 classes 来获得你想要的结果。所以回答你的问题，是的！这是可能的，但您需要更好地理解 CSS 特异性规则，以了解您的更改如何实际影响页面的样式。希望对您有所帮助！

Answer 2

最后我设法找到了解决方案，感谢一位懂一些编程的朋友。我使用了以下 javascript 代码：

<script type="text/javascript">function
SuperGrande() {var ss = document.querySelectorAll(".entry-content span, 
.entry-content div");
for (var n=0;n<ss.length;n++) ss[n].style.fontSize="xx-large";}
</script>

<script type="text/javascript">function
Grande() {var ss = document.querySelectorAll(".entry-content span, .entry- 
content div");
for (var n=0;n<ss.length;n++) ss[n].style.fontSize="x-large";}
</script>

<script type="text/javascript">function
Normal() {var ss = document.querySelectorAll(".entry-content span, .entry- 
content div");
for (var n=0;n<ss.length;n++) ss[n].style.fontSize="large";}
</script>

<a href="javascript:void(0);" onclick="Normal()" id="plustext">Normal</a> | 
<a href="javascript:void(0);" onclick="Grande()" id="minustext">Grande</a> | 
<a href="javascript:void(0);" onclick="SuperGrande()" id="minustext">Muy 
Grande</a>

使用按钮更改字体大小

Change font size with a button

javascript

size

fonts

button