Fatal编程技术网
  • javascript/
  • 在使用javascript调整div内部大小时更改fontsize

在使用javascript调整div内部大小时更改fontsize

javascript html css

在使用javascript调整div内部大小时更改fontsize,javascript,html,css,Javascript,Html,Css,我对javascript相当陌生，但我正在尝试学习 我有一个图像，图像上方有一个div容器。div容器包含两个用于标题和一些文本的内部div。标题的字体大小大于文本 我用来工作和开发的屏幕宽度是768 我想让javascript在加载时更改fontsize，并根据浏览器窗口的比例调整大小。。。因此，如果浏览器窗口大30%。。。字体应该比css中定义的大30%。。。这是我写的代码。。但它不起作用 <head> <style type="text/css"> #conta

我对javascript相当陌生，但我正在尝试学习

我有一个图像，图像上方有一个div容器。div容器包含两个用于标题和一些文本的内部div。标题的字体大小大于文本

我用来工作和开发的屏幕宽度是768

我想让javascript在加载时更改fontsize，并根据浏览器窗口的比例调整大小。。。因此，如果浏览器窗口大30%。。。字体应该比css中定义的大30%。。。这是我写的代码。。但它不起作用

  <head>
<style type="text/css">
#container{
    position: absolute;
    top:10%;
    left: 10%;
    background-color:#F30;

}

#boxtitle{
    font-size:3em;
}
#boxtxt{
    font-size:0.9em;
}
</style>
<script>
onresize=onload=function()
{ 
    var innerW = window.innerWidth;
    var boxtitle = document.getElementById("boxtitle").style.fontSize;
    var boxtxt = document.getElementById("boxtxt").style.fontSize;
    var ratio = innerW / 768;

    boxtitle = boxtitle * ratio;
    boxtxt = boxtxt * ratio;
}
</script>
</head>

<body>
<img src="main_pic3.jpg" width="100%" />
<div id="container">
<table  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><div id="boxtitle">TITLE</div></td>
  </tr>
  <tr>
    <td><div id="boxtxt">TXT</div></td>
  </tr>
</table>

</div>
</body>


#容器{
位置：绝对位置；
排名前10%；
左：10%；
背景色：#F30；
}
#箱名{
字号：3em；
}
#boxtxt{
字号：0.9em；
}
onresize=onload=function（）
{ 
var innerW=window.innerWidth；
var-boxtitle=document.getElementById（“boxtitle”）.style.fontSize；
var-boxtxt=document.getElementById（“boxtxt”）.style.fontSize；
var比率=W/768；
boxtitle=boxtitle*比率；
boxtxt=boxtxt*比率；
}
标题
文本

onresize=onload=function（）
{ 
var innerW=window.innerWidth；
var-boxtitle=document.getElementById（“boxtitle”）.style.fontSize；
var-boxtxt=document.getElementById（“boxtxt”）.style.fontSize；
var比率=W/768；
boxtitle=boxtitle*ratio；//您正在将变量的值设置为字体大小（您没有存储对DOM元素的引用）。此外，请尝试使用
parseInt
确保从数字中获取任何字符串

尝试：

需要注意的是（我没有在其他浏览器中测试过），在Firefox for Mac中，
style.fontSize
只返回内联到元素的字体大小，而不返回样式表上的字体大小

因此，一个选择是：


function getStyle(object,prop) {
    if(getComputedStyle) {
        return getComputedStyle(object)[prop];
    } else if (object.currentStyle) {
        return object.currentStyle[prop]; //IE  
    }
}

//implement it

getStyle(document.getElementById('someElement'),'fontSize'); //for example, outputs 12px


我想指出的一点是，如果您尝试将一个空字符串乘以一个数字（例如，如果您在没有内联样式的情况下使用
style.fontSize
，并将该[现在是一个空字符串]乘以一个整数，例如屏幕宽度[在本例中为768]），它将输出0，这会将您的字体大小设置为0，从而使其消失：


console.log(document.getElementById('download').style.fontSize * 768);

    //outputs 0


此外，我注意到您正在使用
resize
以及
onload
处理程序。我可能建议将
resize
放在
onload
处理程序中，除非您知道不会将其他代码放在
onload
处理程序中（因为这会导致每次调整窗口大小时都会发生很多事情。）


根据屏幕大小处理字体大小的另一个选项是CSS媒体查询（我建议用谷歌搜索）。
首先，您必须存储原始值，否则每次调整大小时都会得到不同的字体大小

然后，您只需附加它


onresize=onload=function()
{
    var ratio = window.innerWidth / 768;
    document.getElementById("boxtitle").style.fontSize = 3*ratio + 'em';
    document.getElementById("boxtxt").style.fontSize = 0.9*ratio + 'em';
}



另一种方法是使用基于视口的度量-
改用百分比作为字体大小，这样所有内容都保持成比例。您只需将顶层与不以百分比为单位的字体大小绑定，如示例所示。否则，在Javascript中维护如此多的字体大小将是一场噩梦

下面是一个例子：

HTML:

JS:


它不工作…它不再显示任何内容…div容器是白色的，里面没有任何内容。我更改了；document.getElementById（“boxtitle”）.style.fontSize=boxtitle*ratio；document.getElementById（“boxtxt”）的最后两行.style.fontSize=boxtxt*ratio；您是否使用开发人员控制台？对于Firefox，一个好的控制台是Firebug，对于Chrome和Safari，只需使用内置的开发人员工具。查看控制台中是否有任何错误。另外，您是否使用了我发布的getStyle函数？如果您不使用内联样式，则将空字符串乘以屏幕宽度h将输出0（从而将字体大小设置为0）。

console.log(document.getElementById('download').style.fontSize * 768);

    //outputs 0



onresize=onload=function()
{
    var ratio = window.innerWidth / 768;
    document.getElementById("boxtitle").style.fontSize = 3*ratio + 'em';
    document.getElementById("boxtxt").style.fontSize = 0.9*ratio + 'em';
}



<div id="container">
    <h1>Title</h2>
    <div class="description">Description</div>
</div>



#container{
    font-size: 13px;
}

.container h1{
    font-size: 150%;
}

.container .description{
    font-size: 100%;
}



onresize=onload=function(){ 
    var innerW = window.innerWidth;
    var ratio = innerW / 768;

    var boxtitle = Math.round(13 * ratio);
    document.getElementById("container").style.fontSize = boxtitle + 'px';
}