Question

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

def play():
# uses underscores hide the word and to hold space for each character within the word
    hide = ''
    secret_word = ''
    tries = 0

# Welcomes user
    print("Welcome to hangman!!!")
    print("Let's get started!!!")
    # allows user to pick difficulty
    difficulty = input("What difficulty do you want to play the game on?\nEasy = 9 tries. Normal = 6 tries. Hard = 4 tries.")
    if difficulty == "easy" or "Easy":

    # allows users to pick a theme
        theme = input("Okay I'll pick a word, all you have to do is pick a theme :) \n Themes to pick from: History, Companies, Geography, Music, Movies, Celebrities, and Sports Team! ")

        # if the theme has a subtheme
        if theme == 'sports team' :
            sport = input("What type of sport? Your options are: Football, Baseball, Basketball, and Hockey.")
            if sport == "Football":

                # imports .txt file of list 
                file = open('NFLTeams.txt', 'r')
                NFL = file.readlines()

                # randomly picks a team from the list
                secret_word = random.choice(NFL)
                print(secret_word)

                #hides the word with underscores
                for letter in secret_word:

                    # doesnt replaces spaces with dash
                    if letter != " ":
                            hide = "_ " * len(secret_word)
                print(hide)

问题是，除帖子文本外，其他所有文本的大小都会改变。

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

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

那么，可以使用按钮将此文本的大小更改为“大”，“ x大”和“ xx大”吗？

Answer 1

因此，CSS的特异性工作方式将内联样式作为最重要的因素考虑在内（!important除外，应尽可能避免使用这种方式。）

在您的情况下，内联样式具有最高的特异性，因为它具有最高的特异性，因此您无法做很多事情来覆盖该样式。我的建议是开始探索CSS中类的使用，并可能在单击时为博客文章分配其他类。

简单的事情

.largeText {
  font-size: large;
}

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

可能会工作。我将让您弄清楚如何利用类来获得所需的结果。因此，回答您的问题，是的！有可能，但是您需要更好地了解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>

使用按钮更改字体大小

2 个答案: