Javascript 更改字体和图像大小而不更改原始CSS
当我无法更改网站的CSS，只能添加内容时，如何将网页上所有文本和图像的大小进行一定的缩放 我想将文本缩放200%，将所有img元素缩放150%。我可以执行JavaScript并用它添加新的CSS，但我不能更改Web服务器提供给我的内容。JavaScript应该很短，所以我不能用我自己的CSS替换所有的原始CSS，而且在任何情况下，这应该适用于多个站点 我的浏览器没有这种缩放功能。哪一个JavaScript代码段可以实现这一点 编辑： jQuery似乎是一条出路，剩下的问题是调整所有文本节点的CSS，而不累积缩放内部文本节点。以下是我现在在bookmerklet中使用的JavaScript：Javascript 更改字体和图像大小而不更改原始CSS,javascript,html,css,text,zooming,Javascript,Html,Css,Text,Zooming,当我无法更改网站的CSS，只能添加内容时，如何将网页上所有文本和图像的大小进行一定的缩放 我想将文本缩放200%，将所有img元素缩放150%。我可以执行JavaScript并用它添加新的CSS，但我不能更改Web服务器提供给我的内容。JavaScript应该很短，所以我不能用我自己的CSS替换所有的原始CSS，而且在任何情况下，这应该适用于多个站点 我的浏览器没有这种缩放功能。哪一个JavaScript代码段可以实现这一点 编辑： jQuery似乎是一条出路，剩下的问题是调整所有文本节点的CS
javascript:
(function(){
var d=document;
var h=d.getElementsByTagName("head")[0];
var b=d.getElementsByTagName("body")[0];
var s=d.createElement("style");
s.appendChild(document.createTextNode('@media screen and (orientation: landscape) {\n'+'@-ms-viewport {\n'+'width: 800px;\n'+'}\n'+'}\n'+'@media screen and (orientation: portrait) {\n'+'@-ms-viewport {\n'+'width: 1000px;\n'+'}\n'+'}\n'+'html {\n'+'-ms-text-size-adjust:none;\n'+'}'));
h.appendChild(s);
var j=d.createElement("script");
j.type='text/javascript';
j.src='http://code.jquery.com/jquery-2.0.0.js';
b.appendChild(j);
eval('$("*").each(function(){'+
'if($(this).text()!=""){'+
'fontSize=parseInt($(this).css("font-size"))*2;'+
'$(this).css("font-size",fontSize);'+
'}'+
'});');
eval('$("img").each(function(){'+
'imageWidth=this.width*2.5;'+
'$(this).css("width",imageWidth);'+
'});');`enter code here`
}
)()
如果您可以添加新的CSS，那么就在那里定义类f.e.“大”。根据需要定义.big p、.big div、.big img等。然后可以通过javascript将该类添加到body元素 看看我写的这个例子：
<html><head><title>Example</title>
<style>
/* this is basic definition */
body {
font-size:20px;
}
/* this is definition you will add in your css */
.big {
font-size:200%;
}
</style>
<script>
function change(x) {
document.body.className=x?"big":"";
}
</script>
</head>
<body>
<div>Blablablabla</div>
<input type="button" onclick="change(1);" value="Zoom">
<input type="button" onclick="change(0);" value="Unzoom">
</body></html>
示例
/*这是基本定义*/
身体{
字体大小：20px；
}
/*这是您将添加到css中的定义*/
.大{
字体大小：200%；
}
功能改变（x）{
document.body.className=x？“大”：“；
}
布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉
$('#scaled *').each(function(){
if ($(this).text() != '')
fontSize = parseInt($(this).css("font-size")) * 2 //incease by 100%;
$(this).css('font-size',fontSize);
});
$('#scaled img').each(function(){
imageWidth = this.width * 2.5; //incease by 150%
$(this).css('width',imageWidth);
})
我已经用小提琴演示了我的答案-将字体大小设置为200%不会使元素当前的字体大小增加一倍。相反，它使字体大小为父元素字体大小的两倍。当元素嵌套（通常是嵌套的）时，累积的效果会很明显。@Jukka K.Korpela-好的观点！我已经仔细考虑过了，我更新了我的答案。使用jQuery更改图像非常有效，因此jQuery似乎是一条可行之路。但是，使用此代码缩放文本会将整个页面放大。我将编辑我的问题，以包括我在jQuery中的位置。因为这显然是特定浏览器的一个或多个用户所需要的，所以您应该标识浏览器。操纵样式属性的方法往往依赖于浏览器。我正在使用IE10桌面版本测试解决方案。我正在使用Microsoft specific-ms viewport CSS属性来约束视口大小，但CSS和JavaScript不需要任何其他特定于供应商的更改。我不需要与早期IE版本向后兼容。这不起作用。我把它修改成书签，并在这个网页上试用。虽然主体的class属性在empty和“big”之间变化，但此页面上的文本大小没有变为200%。我使用了Bookmarklet生成器，代码在这里