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

时间:2018-03-01 19:08:07

标签: javascript css

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



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

<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;
&#13;
&#13;

2 个答案:

答案 0 :(得分:2)

使用相应的选择器:

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分: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>