更改字体大小在javascript中调整大小div

我是相当新的JavaScript，但我试图让自己。更改字体大小在javascript中调整大小div

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

，我用它来工作和发展我的屏幕innerwidth是768

我想有基于JavaScript的浏览器窗口的比例改变负载和调整大小的字体大小...因此，如果浏览器窗口是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>

来源

2014-02-10 user3011784

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; //<--- try appending px example below up to you how you append it 
    document.getElementById("boxtitle").style.fontSize = '100px' 
    boxtxt = boxtxt * ratio; //<--- try appending px 
}

来源

2014-02-10 00:38:17

您设置值的变量字体大小的（你是不是存储到DOM元素的引用。）另外，请尝试使用parseInt，以确保你得到任何串出你的号码。

尝试：

var innerW = parseInt(window.innerWidth), 
    boxtxt = parseInt(document.getElementById("boxtxt").style.fontSize), 
    ratio = innerW/768; 

document.getElementById("boxtxt").style.fontSize = (boxtxt * ratio) + 'px'; //etc.

需要注意的一点（我没有在其他浏览器测试它）是在Firefox的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，因此使其消失：

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

    //outputs 0

此外，我注意到您正在使用resize以及onload处理程序。我可能会建议把resize您onload处理程序中，而不是，除非你知道你会不会把其他代码的onload处理器中（因为这会导致很多的东西发生的每一次窗口大小。）

根据屏幕尺寸处理字体大小的另一种选择是CSS媒体查询（我建议Google搜索该选项）。

来源

2014-02-10 00:38:36

它不工作...它不显示任何东西......分裂contai ner是白色的，没有任何东西。我改变了我的最后2行; \t document.getElementById（“boxtitle”）。style.fontSize = boxtitle * ratio; \t document.getElementById（“boxtxt”）。style.fontSize = boxtxt * ratio; – user3011784

您使用开发者控制台吗？对于Firefox，Firebug是一个不错的选择，对于Chrome和Safari，只需使用内置的开发者工具即可。查看控制台中是否有任何错误。 –

另外，你使用我发布的getStyle函数吗？如果您不使用内联样式，那么将一个空字符串乘以屏幕宽度将输出0（因此将您的字体大小设置为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'; 
}

另一种方法是使用基于视窗的指标 - http://snook.ca/archives/html_and_css/vm-vh-units

来源

2014-02-10 00:43:40 pwolaq

完美的作品！谢谢 – user3011784

如何使用百分比字体大小代替一切留的比例也。您只需要将顶级字体大小限定为不像示例中那样百分比。否则，你将会有一场噩梦试图在Javascript中保持这么多的字体大小。

下面是一个例子：http://jsfiddle.net/yL89q/

HTML：

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

CSS：

#container{ 
    font-size: 13px; 
} 

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

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

JS：

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

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

来源

2014-02-10 00:58:58 juminoz

更改字体大小在javascript中调整大小div

回答

相关问题