[英]Change font size of all elements inside a div
我有以下頁面,其中有一個div菜單。 在內部菜單中我們可以有<table>
, <p>
, <h>
。 例如,不同的元素:
<div id="menu">
<p>abc def</p>
<table>
<tr><td>helloo </td><tr>
<tr><td>hiii </td><tr>
</table>
<div id="sub"><p>123 this is test</p></div>
</div>
有沒有辦法改變菜單內部元素之間的所有文本的大小。 例如:abc def,hellooo,hiii,123這是測試。 我可以使用jquery或javascript更改所有文本。
是的,你可以使用JavaScript和/或jQuery來做你想要的,但為什么你不會像建議的那樣使用CSS?
或者你可以嘗試這個:
<Style>
/*Assumed everything is inheriting font-size*/
#menu{
font:12px;
}
/* Force all children to have a specified font-size */
#menu *{
font:14px;
}
</style>
<script>
//JavaScript
document.getElementById('menu').style.fontSize = "14px";
//jQuery
$("#menu").css({'font-size':'14px'});
</script>
你可以用css做到這一點:
#menu {
font-size: XXX;
}
jQuery示例
$('#menu').nextAll().css('font', '14px');
var VINCI = {};
VINCI.Page = {
init : function() {
this.initFontResize();
},
initFontResize : function() {
var container = $('#menu, #sub');
var originalFontSize = parseFloat(container.css('font-size'), 10);
var size_level = 0;
var maximum_size_level = 5;
var size_change_step = 1.4;
function calculateFontSize()
{
return originalFontSize + (size_level * size_change_step);
}
// Increase Font Size
$('.increaseFont').click(function(){
if (size_level < maximum_size_level) {
size_level++;
container.stop().animate({'font-size' : calculateFontSize()});
}
return false;
});
// Decrease Font Size
$('.decreaseFont').click(function(){
if (size_level > 0) {
size_level--;
container.stop().animate({'font-size' : calculateFontSize()});
}
return false;
});
};
VINCI.Page.init();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.