Question

我正在尝试为用户创建字体大小调整器。我可以使用＆＃34;这个＆＃34;。但是我无法使用按钮。我怎么能这样做？我使用的课程不是id（如果我像#keko一样使用那么它的工作）

＆＃13;

.keko {
    position: relative;
    width:70px;
	height:70px;
    margin: auto;
	font-size: 15px;
    background: green;
    }

＆＃13;

<link rel="stylesheet" href="Label.css%20-%20Label%20every%20thing!_dosyalar/style.css">
<link rel="stylesheet" href="Label.css%20-%20Label%20every%20thing!_dosyalar/label.css">
     
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".keko").click(function(){
            $(this).css("font-size", "50px");
        });    
    });	
    </script>
                  
 <div class="keko"><p>This text</p><div>
 <button type="button">Add CSS Styles</button>

＆＃13;

Answer 1

使用相应的选择器：

＆＃13;

$(document).ready(function() {
  $('button').click(function() {
    $(".keko").css("font-size", "50px");
  });
});

＆＃13;

.keko {
  position: relative;
  width: 70px;
  height: 70px;
  margin: auto;
  font-size: 15px;
  background: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<div class="keko">
  <p>This text</p>
<div>

<button type="button">Add CSS Styles</button>

＆＃13;

Answer 2

只要我关闭头标记，这对我有用。

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    .keko {
        position: relative;
        width:70px;
        height:70px;
        margin: auto;
        font-size: 15px;
        background: green;
    }
</style>
</head>
<body>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".keko").click(function(){
                $(this).css("font-size", "50px");
            });    
        }); 
    </script>

    <div class="keko"><p>This text</p><div>
    <button type="button">Add CSS Styles</button>

</body>
</html>

使用javascript的字体大小调整器不起作用

2 个答案: