Javascript 看不到字体大小_Javascript_Html_Jquery_Css

Javascript 看不到字体大小

javascript html jquery css

Javascript 看不到字体大小,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我想将地址改为字体大小，以便在按键时更改球的大小，但在开关中，程序只看到连字符后的大小（而不是字体大小）任务：创建一个显示气球的页面（使用表情符号）。单击向上箭头时，球应膨胀（增加）10%，单击向下箭头时，球应膨胀（减少）10% 然后按如下步骤完成程序，如果球膨胀到一定大小，它将爆炸。也就是说，您需要将球（气球）的表情符号替换为爆炸的表情符号（）。您需要移除事件处理程序（爆炸无法充气或充气） html，正文{ 保证金：0；溢出：隐藏； } #blueRect{ 左边距：自动；右边距：自动

我想将地址改为字体大小，以便在按键时更改球的大小，但在开关中，程序只看到连字符后的大小（而不是字体大小）

任务：创建一个显示气球的页面（使用表情符号）。单击向上箭头时，球应膨胀（增加）10%，单击向下箭头时，球应膨胀（减少）10%

然后按如下步骤完成程序，如果球膨胀到一定大小，它将爆炸。也就是说，您需要将球（气球）的表情符号替换为爆炸的表情符号（）。您需要移除事件处理程序（爆炸无法充气或充气）


html，正文{
保证金：0；
溢出：隐藏；
}
#blueRect{
左边距：自动；
右边距：自动；
宽度：1000px；
高度：1000px；
背景色：无；
字体大小：500px；
文本对齐：居中；
游标：默认值
}
.box1{
位置：相对位置；
左边距：自动；
右边距：自动；
顶部：自动；
底部：自动；
高度：1500px；
宽度：1000px；
}
.1{
身高：80%；
宽度：80%；
位置：绝对位置；
左：0px；
顶部：0px；
z指数：1；
}
.二{
身高：80%；
宽度：80%；
位置：绝对位置；
左：0px；
顶部：0px；
可见性：隐藏；
}
#第二{
左边距：自动；
右边距：自动；
宽度：1000px；
高度：1000px；
背景色：无；
字体大小：500px；
文本对齐：居中；
游标：默认值
}
您可以使用下面的代码来添加自己的功能，下面的代码仅供参考，根据您的需要进行相应的使用和开发。希望对您有所帮助

var blueRect=document.getElementById（“blueRect”）；
var size_val=window.getComputedStyle（blueRect，null）.getPropertyValue（“字体大小”）；
var size=parseInt（size_val）；
函数moveRect（事件）{
//警报（事件类型）；
开关（事件类型）
{        
案例“点击”：
var newSize=（大小+10）；
大小=新闻大小；
blueRect.style.fontSize=newSize+“px”/*setSize（大小+10px）*/
打破
}
}
blueRect.addEventListener（“单击”，moveRect）；//将箭头向上和向下放置在与此类似的位置blueRect充当向上的角色，类似地将箭头向下放置
html，正文{
保证金：0；
溢出：隐藏；
}
#blueRect{
左边距：自动；
右边距：自动；
宽度：1000px；
高度：1000px；
背景色：无；
字体大小：500px；
文本对齐：居中；
游标：默认值
}
.box1{
位置：相对位置；
左边距：自动；
右边距：自动；
顶部：自动；
底部：自动；
高度：1500px；
宽度：1000px；
}
.1{
身高：80%；
宽度：80%；
位置：绝对位置；
左：0px；
顶部：0px；
z指数：1；
}
.二{
身高：80%；
宽度：80%；
位置：绝对位置；
左：0px；
顶部：0px；
可见性：隐藏；
}
#第二{
左边距：自动；
右边距：自动；
宽度：1000px；
高度：1000px；
背景色：无；
字体大小：500px；
文本对齐：居中；
游标：默认值
}

查看文档，其中给出了如何获取font-size
的示例size>50px
无效。我们已经看到它使用了style.fontSize，但仍然存在问题。如果我删除了呢。我需要先处理fontSize。var size=window.getComputedStyle（blueRect.getPropertyValue（“font size”）这将获取大小，我如何访问开关盒？谢谢，但我用另一种方法修复了它-var size=parseInt（cs.fontSize）。现在我考虑爆炸部分。好的，继续
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
    html, body{
        margin:0;
        overflow:hidden;
    }
    #blueRect{
        margin-left: auto;
        margin-right: auto;
        width:1000px;
        height:1000px;
        background-color: none;
        font-size: 500px;
        text-align: center;
        cursor: default
    }
    .box1 {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  top: auto;
  bottom: auto;
  height: 1500px;
  width: 1000px;
}
.one { 
  height: 80%;
  width: 80%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;
}
.two {
  height: 80%;
  width: 80%;
  position: absolute;
  left: 0px;
  top: 0px;
  visibility:hidden;
}
#second{
 margin-left: auto;
        margin-right: auto;
        width:1000px;
        height:1000px;
        background-color: none;
        font-size: 500px;
        text-align: center;
        cursor: default
}
    </style>
</head>
<body>
<div class = "box1">
<div class = "one" id="blueRect">You can use below codes with adding up your own functionality , below code is just to reference , make it use and develop accordingly based on your needs.Hope this may help. Codepen Demo.


  var blueRect = document.getElementById("blueRect");
    var size_val = window.getComputedStyle(blueRect,null).getPropertyValue("font-size");
     
    var size = parseInt(size_val);

function moveRect(event){
  //alert(event.type);
  
    switch(event.type)
    {        
      case "click": 
            var newSize = (size + 10); 
        size = newSize;
            blueRect.style.fontSize = newSize +"px"; /*setSize(size+10px)*/
      break;
    }
}


blueRect.addEventListener("click", moveRect); // Put your arrowup and arrowdown similar to this here blueRect act as up similarly do it for down