gpt4 book ai didi

javascript - 在格式化图像的javascript函数中创建一个新的换行符

转载 作者:行者123 更新时间:2023-11-28 05:31:27 32 4
gpt4 key购买 nike

我不是 javascript 开发人员,但我得到了一些调试代码。请多多包涵。基本上,我正在处理的 iOS 模块中有一个 .js CSS 文件集。图片当前加载不正确,导致需要水平滚动。

这是我的代码。您可以看到样式设置为 block 显示,但这没有提供所需的输出。

function resizeImages(container, maxWidth) {
var images = container.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var img = images[i];

var width = parseInt(window.getComputedStyle(img, null).getPropertyValue('width'));
var height = parseInt(window.getComputedStyle(img, null).getPropertyValue('height'));
if (width > maxWidth) {
var ratio = maxWidth / width;
img.style.width = (maxWidth - 30) + "px";

// Some image heights are set to 'auto' so they do not need their height set
if (height != 0) {
img.style.height = parseInt(height * ratio) + "px";
}
}

img.style.display = "block";
img.style.marginLeft = "auto";
img.style.marginRight = "auto";
}
}

是否可以在此函数中设置布局,还是我必须寻找其他方法?

谢谢你的帮助

编辑*************** 打印出调用返回的 html 并在此处添加我能添加的内容

<link rel="stylesheet" href="/7.0.2.0/styles/jive-base.css" type="text/css"     media="all"/>
<link rel="stylesheet" href="/7.0.2.0/styles/jive.css" type="text/css" media="all"/>
<link rel="stylesheet" href="/7.0.2.0/styles/jive-content.css" type="text/css" media="all" />

<style>
/* Improve default page styles for mobile */
body { background-color: #FFFFFF; min-width: 100px; padding-top: 20px; padding-left: 10px; padding-right: 10px;}
p {width: 98%; }
div.jive-rendered-content { width: 98%; }
.jive-rendered-content img.jive-image { margin: 5px; }

/* Remove link icons from inline links */
.jive-link-profile-small, .jive-link-socialgroup-small, .jive-link-community-small, .jive-link-blog-small, .jive-link-video-small, .jive-link-external-small:after, .jive-link-external-small, .jive-link-wiki-small { background-image: none; }

/* Remove underline from links after they're activated */
a:hover, a:active, a:focus { text-decoration: none; }

/* Hide unsupported Flash video content */
.jive-video-view, .jive-content-video { display: none; }
</style>

HTML 我知道这很难看,但我试图在留下肉的同时清理它。抱歉。

<body><link rel="stylesheet" href="/7.0.2.0/styles/jive-base.css" type="text/css" media="all"/>
<link rel="stylesheet" href="/7.0.2.0/styles/jive.css" type="text/css" media="all"/>
<link rel="stylesheet" href="/7.0.2.0/styles/jive-content.css" type="text/css" media="all" />

<style>
/* Improve default page styles for mobile */
body { background-color: #FFFFFF; min-width: 100px; padding-top: 20px; padding-left: 10px; padding-right: 10px;}
p {width: 98%; }
div.jive-rendered-content { width: 98%; }
.jive-rendered-content img.jive-image { margin: 5px; }

/* Remove link icons from inline links */
.jive-link-profile-small, .jive-link-socialgroup-small, .jive-link-community-small, .jive-link-blog-small, .jive-link-video-small, .jive-link-external-small:after, .jive-link-external-small, .jive-link-wiki-small { background-image: none; }

/* Remove underline from links after they're activated */
a:hover, a:active, a:focus { text-decoration: none; }

/* Hide unsupported Flash video content */
.jive-video-view, .jive-content-video { display: none; }
</style><!-- [DocumentBodyStart:e313f4cb-be82-4ce9-9325-7ec5d2d25b49] --><div class="jive-rendered-content"><p><p style="min-height: 8pt; padding: 0px;">&#160;</p><table border="0px" class="jiveBorder" jive-data-cell="{&quot;color&quot;:&quot;#3D3D3D&quot;,&quot;textAlign&quot;:&quot;center&quot;,&quot;padding&quot;:&quot;2&quot;,&quot;backgroundColor&quot;:&quot;transparent&quot;,&quot;fontFamily&quot;:&quot;Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif&quot;,&quot;verticalAlign&quot;:&quot;baseline&quot;}" jive-data-header="{&quot;color&quot;:&quot;#505050&quot;,&quot;backgroundColor&quot;:&quot;#F2F2F2&quot;,&quot;textAlign&quot;:&quot;left&quot;,&quot;padding&quot;:&quot;6&quot;}" style="border: 0px solid #c6c6c6; width: 100%;"><tbody><tr><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: top;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522497/13672161_10157144798120367_1344748601_n.jpg"><img alt="13672161_10157144798120367_1344748601_n.jpg" class="image-1 jive-image" height="206" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522497/13672161_10157144798120367_1344748601_n.jpg" style="height: auto;" width="275"/></a></td><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: top;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522498/13689395_10157144799275367_1573986411_n.jpg"><img alt="13689395_10157144799275367_1573986411_n.jpg" class="image-2 jive-image" height="206" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522498/13689395_10157144799275367_1573986411_n.jpg" style="height: auto;" width="275"/></a></td><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: top;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522499/13706333_10157144800985367_1742170785_n.jpg"><img alt="13706333_10157144800985367_1742170785_n.jpg" class="image-3 jive-image" height="206" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522499/13706333_10157144800985367_1742170785_n.jpg" style="height: auto;" width="275"/></a></td></tr></tbody></table><p style="min-height: 8pt; padding: 0px;">&#160;</p><table border="0px" class="jiveBorder" jive-data-cell="{&quot;color&quot;:&quot;#3D3D3D&quot;,&quot;textAlign&quot;:&quot;center&quot;,&quot;padding&quot;:&quot;2&quot;,&quot;backgroundColor&quot;:&quot;transparent&quot;,&quot;fontFamily&quot;:&quot;Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif&quot;,&quot;verticalAlign&quot;:&quot;baseline&quot;}" jive-data-header="{&quot;color&quot;:&quot;#505050&quot;,&quot;backgroundColor&quot;:&quot;#F2F2F2&quot;,&quot;textAlign&quot;:&quot;left&quot;,&quot;padding&quot;:&quot;6&quot;}" style="border: 0px solid #c6c6c6; width: 100%;"><tbody><tr><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: baseline;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522500/13705113_10157144798165367_204528607_n.jpg"><img alt="13705113_10157144798165367_204528607_n.jpg" class="image-4 jive-image" height="206" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522500/13705113_10157144798165367_204528607_n.jpg" style="height: auto;" width="275"/></a></td><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: baseline;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522501/13714428_10157148347660367_1956053232_n.jpg"><img alt="13714428_10157148347660367_1956053232_n.jpg" class="image-5 jive-image" height="206" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522501/13714428_10157148347660367_1956053232_n.jpg" style="height: auto;" width="275"/></a></td><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: baseline;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522502/13689832_10157144798095367_1657929227_n.jpg"><img alt="13689832_10157144798095367_1657929227_n.jpg" class="image-6 jive-image" height="206" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522502/13689832_10157144798095367_1657929227_n.jpg" style="height: auto;" width="275"/></a></td></tr></tbody></table><p style="min-height: 8pt; padding: 0px;">&#160;</p><table border="0px" class="jiveBorder" jive-data-cell="{&quot;color&quot;:&quot;#3D3D3D&quot;,&quot;textAlign&quot;:&quot;center&quot;,&quot;padding&quot;:&quot;2&quot;,&quot;backgroundColor&quot;:&quot;transparent&quot;,&quot;fontFamily&quot;:&quot;Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif&quot;,&quot;verticalAlign&quot;:&quot;baseline&quot;}" jive-data-header="{&quot;color&quot;:&quot;#505050&quot;,&quot;backgroundColor&quot;:&quot;#F2F2F2&quot;,&quot;textAlign&quot;:&quot;left&quot;,&quot;padding&quot;:&quot;6&quot;}" style="border: 0px solid #c6c6c6; width: 100%;"><tbody><tr><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: baseline;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522503/13689795_10157148347775367_1926959939_n.jpg"><img alt="13689795_10157148347775367_1926959939_n.jpg" class="image-7 jive-image" height="400" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522503/13689795_10157148347775367_1926959939_n.jpg" style="height: auto;" width="300"/></a></td><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: baseline;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522504/13713516_10157148347865367_1911484589_n.jpg"><img alt="13713516_10157148347865367_1911484589_n.jpg" class="image-8 jive-image" height="400" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522504/13713516_10157148347865367_1911484589_n.jpg" style="height: auto;" width="300"/></a></td></tr></tbody></table></div><!-- [DocumentBodyEnd:e313f4cb-be82-4ce9-9325-7ec5d2d25b49] --><script type="text/javascript">

function formatBlogContent() {
var container = document.querySelector('body');
var maxWidth = document.body.clientWidth - 30;

// Size images to screen
resizeImages(container, maxWidth);

// Remove left/right padding
var items = container.getElementsByTagName("*");
for (var i = 0; i < items.length; i++) {
var item = items[i];

// Set the font size
item.style.fontSize = "11pt";

// Remove indentation
var paddingLeftString = window.getComputedStyle(item, null).getPropertyValue('padding-left');
var paddingLeftInt = parseInt(paddingLeftString);
var paddingRightString = window.getComputedStyle(item, null).getPropertyValue('padding-right');
var paddingRightInt = parseInt(paddingRightString);
if (paddingLeftInt > 0 || paddingRightInt > 0) {
item.style.paddingLeft = "0px";
item.style.paddingRight = "0px";
item.style.width = maxWidth - 50 + "px";
item.style.marginLeft = "auto";
item.style.marginRight = "auto";

// Resize adjusted block level images
resizeImages(item, (maxWidth - 65));
}
}

// Remove tables that are larger than the content space
var tables = container.getElementsByTagName('table');
for (var i = 0; i < tables.length; i++) {
var table = tables[i];

var tableWidth = window.getComputedStyle(item, null).getPropertyValue('width');
// alert("width: " + tableWidth)
if (tableWidth > maxWidth) {
table.style.display = "none";
} else {
table.width = "98%"
}
}

// Adjust Links
updateLinks(container)
}

function resizeImages(container, maxWidth) {
var images = container.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var img = images[i];

var width = parseInt(window.getComputedStyle(img, null).getPropertyValue('width'));
var height = parseInt(window.getComputedStyle(img, null).getPropertyValue('height'));
if (width > maxWidth) {
var ratio = maxWidth / width;
img.style.width = (maxWidth - 30) + "px";

// Some image heights are set to 'auto' so they do not need their height set
if (height != 0) {
img.style.height = parseInt(height * ratio) + "px";
}
}

img.style.display = "block";
img.style.marginLeft = "auto";
img.style.marginRight = "auto";
}
}

function updateLinks(container) {
var links = container.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
var link = links[i];
var url = link.href

// Test for link to profiles
var peopleLinks = url.search(/\/people\//i);
if (peopleLinks > 0) {
// Move to next profile, leaving link active
continue;
}

// Test for link to a blog
var blogLinks = url.search(/\/blogs\//i);
if (blogLinks > 0) {
// Replace URL with AWB URL
var awbURL = url.replace("https:","awbs:");
link.href = awbURL;
continue;
}

// Disable link
link.href = "javascript:void(0)";

// Set the text color to the same as the parent element so that user can't tell there's a link
var parent = link.parentElement;
link.style.color = window.getComputedStyle(parent, null).getPropertyValue('color');
}
}

// Kick off the formating process after the page load
formatBlogContent();

</script></body>

最佳答案

我最终使用其中一条评论作为答案。代码在 css 文件中看起来像这样

img {
max-width: 98%;
height: auto;
}

关于javascript - 在格式化图像的javascript函数中创建一个新的换行符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38492044/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com