个人中心
gpt4 book ai didi

javascript - 在 CSS 列中围绕固定 float 图像使用 JavaScript 增加字体大小

转载 作者：行者123 更新时间：2023-11-27 22:48:46 24 4
gpt4 key购买 nike

我正在搜索一个 html 页面，我可以在其中获取要使用 javascript 增加的 div 中文本的字体大小，同时不应更改放置在该 div 中的图像，因为文本大小为增加。下面我用 javascript 粘贴带有文本 div 和图像 div 的示例 html 页面以增加字体大小。当我们单击“更改字体大小”按钮时，它会增加字体大小，同时放置在该 div 中的图像将从其初始位置移位。但我应该把这张图片放在同一个位置，不管文本大小如何增加，如果文本溢出，它应该转到下一栏。请帮助我克服这个困难。

    <html>
<head>

<style type="text/css">
<!--

div#multicolumn4 {
    -moz-column-width: 150px;
    -moz-column-gap: 20px;
    -webkit-column-width: 250px;
    -webkit-column-gap: 20px;
    column-width: 150px;
    column-gap: 20px;
    height: 900px;
}


-->
</style>

<script>
  function changeFontSize(size)
  {
  debugger;
   var elms = document.getElementsByTagName("span");
   for(var i = 0;i < elms.length;i++)
   {
    var elmsHtml = elms[i].innerHTML;
    var widthFactor = parseInt(elms[i].style.fontSize);
    var FontSize = 0;
    var ln = elmsHtml.length;
    FontSize = Math.ceil(widthFactor +size);
    elms[i].style.fontSize = FontSize;
   }
  }
  function setFontSize(FontSize)
  {
   var elms = document.getElementsByTagName("span");
   for(var i = 0;i < elms.length;i++)
   {
    elms[i].style.fontSize = FontSize;
   }
  }
 </script>
</head>

<body>
    <div>


<div id="multicolumn4" >
<span style='font-size:10px;'>
<h1>The header of the columns</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at turpis eget nibh ultricies dignissim. Duis luctus euismod turpis. Mauris augue. Aliquam facilisis semper elit. Pellentesque semper hendrerit arcu. Phasellus eleifend commodo justo. Aliquam orci urna, imperdiet sit amet, posuere in, lobortis et, risus. Integer interdum nonummy erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum, eleifend vitae, mollis vel, mollis sed, purus. Suspendisse mollis elit eu magna. Morbi egestas. Nunc leo ipsum, blandit ac, viverra quis, porttitor quis, dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc.</p>
</span>
<div><img id="Image-Maps_5201006280459541" src="images/im1.png" usemap="#Image-Maps_5201006280459541" border="0" width="192" height="256" alt="" />
<span style='font-size:10px;'>
<p>Nam ut sapien sed pede pulvinar rutrum. Nunc eu elit sed augue aliquet tincidunt. Morbi rutrum. Vestibulum dui turpis, lobortis quis, euismod sed, consectetuer sit amet, nunc. Nam mi. Fusce at nisl eu tortor bibendum eleifend. Sed ac metus. Phasellus nec elit. Morbi tortor nulla, tristique a, adipiscing at, consectetuer et, nisi. Nunc vel sapien sed risus hendrerit egestas. Vivamus turpis arcu, placerat eu, congue vel, commodo ut, nisl.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at turpis eget nibh ultricies dignissim. Duis luctus euismod turpis. Mauris augue. Aliquam facilisis semper elit. Pellentesque semper hendrerit arcu. Phasellus eleifend commodo justo. Aliquam orci urna, imperdiet sit amet, posuere in, lobortis et, risus. Integer interdum nonummy erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum, eleifend vitae, mollis vel, mollis sed, purus. Suspendisse mollis elit eu magna. Morbi egestas. Nunc leo ipsum, blandit ac, viverra quis, porttitor quis, dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc.</p>

<p>Nam ut sapien sed pede pulvinar rutrum. Nunc eu elit sed augue aliquet tincidunt. Morbi rutrum. Vestibulum dui turpis, lobortis quis, euismod sed, consectetuer sit amet, nunc. Nam mi. Fusce at nisl eu tortor bibendum eleifend. Sed ac metus. Phasellus nec elit. Morbi tortor nulla, tristique a, adipiscing at, consectetuer et, nisi. Nunc vel sapien sed risus hendrerit egestas. Vivamus turpis arcu, placerat eu, congue vel, commodo ut, nisl.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at turpis eget nibh ultricies dignissim. Duis luctus euismod turpis. Mauris augue. Aliquam facilisis semper elit. Pellentesque semper hendrerit arcu. Phasellus eleifend commodo justo. Aliquam orci urna, imperdiet sit amet, posuere in, lobortis et, risus. Integer interdum nonummy erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum, eleifend vitae, mollis vel, mollis sed, purus. Suspendisse mollis elit eu magna. Morbi egestas. Nunc leo ipsum, blandit ac, viverra quis, porttitor quis, dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc.</p>

<p>Nam ut sapien sed pede pulvinar rutrum. Nunc eu elit sed augue aliquet tincidunt. Morbi rutrum. Vestibulum dui turpis, lobortis quis, euismod sed, consectetuer sit amet, nunc. Nam mi. Fusce at nisl eu tortor bibendum eleifend. Sed ac metus. Phasellus nec elit. Morbi tortor nulla, tristique a, adipiscing at, consectetuer et, nisi. Nunc vel sapien sed risus hendrerit egestas. Vivamus turpis arcu, placerat eu, congue vel, commodo ut, nisl.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at turpis eget nibh ultricies dignissim. Duis luctus euismod turpis. Mauris augue. Aliquam facilisis semper elit. Pellentesque semper hendrerit arcu. Phasellus eleifend commodo justo. Aliquam orci urna, imperdiet sit amet, posuere in, lobortis et, risus. Integer interdum nonummy erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum, eleifend vitae, mollis vel, mollis sed, purus. Suspendisse mollis elit eu magna. Morbi egestas. Nunc leo ipsum, blandit ac, viverra quis, porttitor quis, dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc.</p>

<p>Nam ut sapien sed pede pulvinar rutrum. Nunc eu elit sed augue aliquet tincidunt. Morbi rutrum. Vestibulum dui turpis, lobortis quis, euismod sed, consectetuer sit amet, nunc. Nam mi. Fusce at nisl eu tortor bibendum eleifend. Sed ac metus. Phasellus nec elit. Morbi tortor nulla, tristique a, adipiscing at, consectetuer et, nisi. Nunc vel sapien sed risus hendrerit egestas. Vivamus turpis arcu, placerat eu, congue vel, commodo ut, nisl.</p>


</span>
        <p><button onclick="changeFontSize(1.0)">Change font size (+)</button></p>
        <p><button onclick="changeFontSize(-1.0)">Change font size (-)</button></p>
 </div>
 </div>
 </body>
</html>

最佳答案

此类布局问题已asked before很多次:-)

从快速阅读该线程上的链接来看，这似乎并不容易。

编辑: 是的，这个问题一直困扰着我。我认为使用 少量 大量 复杂的 JavaScript/jQuery 是可能的，并设置了 making a demo .

还有一些工作要做，因为 <p>包含图像的文件以糟糕的方式保留(即充满了 <span> 元素)。我也不对该解决方案的性能做出任何 promise 。它似乎对我有用。哦还有 Font +链接只会工作一次，因为它增加文本的字体的实际大小是固定的。

也就是说，我真的会尝试为您的问题找到替代解决方案，甚至会质疑为什么您需要以这种方式修复图像位置。这违反了正常的浏览器重流和规则。

编辑:Improved demo 解决了评论中的问题。

编辑 2: 哇，我不知道 CSS3 列布局对于浏览器来说有多复杂!计算高度是为了使列或多或少相等，这意味着当我分离 <img> 时高度被调整。如果 font-size 调整后的高度会有所不同增加和 <img> 未删除。在 <img> 之前无法确定结果的高度被删除和添加。

也就是说，我已经让它在一个主要条件下工作 - 该列具有硬编码高度。我试图让它与浏览器计算的高度一起工作(正如正常的流程规则所规定的那样)但我认为如果没有更多的工作可能会非常困难。我认为这可能有效的唯一方法是移动 <img>元素转发一个<span> (即单词)一次直到正确 position().top到达了。但这将是非常低效的，并且可能会减慢渲染速度以至于无法使用。

所以，这里是 my final demo 在 Chrome 11 中为我工作。抱歉，我无法获得可变高度的完整解决方案，但正如我和其他人所说，它确实打破了所有浏览器布局规则!

编辑 3: 当我说“最终”演示时，我显然不是那个意思。我接受您的挑战，让这个功能能够正确处理多张图片，我真的希望这次我能成功。请看看这个 new demo (为我在 Chrome12 中工作)与您发布的 HTML 一起工作。我必须承认您发布的 JavaScript 非常复杂。因此，我重构了所有内容，以基于我的原始 JavaScript 处理多个图像。

编辑 4: 现在进行了很多编辑……但我发现了错误。对于每个字体增量或减量，图像都会在流程中移动，并且可能是 margin-top添加以将图像移回其原始位置。但是在重新计算后续字体大小更改的位置之前，我没有清除此 CSS。

添加的关键代码是:

// clear any existing marginTop added on the images
images.each(function() {
    $(this).css('marginTop', 0);
});

我在那里的时候还稍微整理了 JavaScript，并通过删除 <span> 修复了另一个错误。元素 :-)

Updated jsFiddle demo

为了防止 jsFiddle 消失，这里是一个 HTML 文件的完整解决方案:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
        $(function(){
            var fontSize = 15;

            // cannot store img.position().top or .left here because it is
            // before the browser has re-flowed the columns, therefore the
            // positions will be incorrect
            var imageTops = new Array;
            var imageLefts = new Array;

            $('#fontUp').click(function() {
                reflow(1);
            });

            $('#fontDown').click(function() {
                reflow(-1);
            });

            function reflow(fontSizeStep) {
                storeImagePositions();
                var fontLimitReached = changeFont(fontSizeStep);
                if (!fontLimitReached) {
                    moveImages();
                }
                return false;
            }

            function changeFont(step) {
                fontSize += step;

                var fontSizeLimitReached = true;

                if (fontSize > 30) {
                    fontSize = 30;
                } else if (fontSize < 15) {
                    fontSize = 15;
                } else {
                    fontSizeLimitReached = false;
                }

                if (!fontSizeLimitReached) {
                    $('p').css({fontSize: fontSize + 'px'});
                }

                return fontSizeLimitReached;
            }

            // initialize store of img top and left positions
            function storeImagePositions() {
                if (imageTops.length == 0) { // only do it once
                    $('img').each(function() {
                        var imgPosition = $(this).position();

                        imageTops.push(imgPosition.top);
                        imageLefts.push(imgPosition.left);
                    });
                }
            }

            function moveImages() {
                // bye bye images
                var images = $('img').detach();

                // clear any existing marginTop added on the images
                images.each(function() {
                    $(this).css('marginTop', 0);
                });


                // spanify paragraphs
                $('#column > p').each(function() {
                    $(this).html('<span>' + $(this).html().replace(/\s\s+/g).replace(/(\s)/g,'</span>$1<span>') + '</span>');
                });

                var imageIndex = 0;

                // iterate words, working out where we can move the img to in the flow and if
                // we find a match, increment the index so that as we continue the each()
                // the next image is evaluated for replacement
                $('#column > p span').each(function() {
                    var wordPosition = $(this).position();
                    var wordLeft = wordPosition.left;

                    if (wordLeft >= imageLefts[imageIndex]) {
                        var wordBottom = wordPosition.top + $(this).height();

                        if (wordBottom > imageTops[imageIndex]) {
                            $(this).before(images[imageIndex]); // move img before this word
                            var newImgTop = $(images[imageIndex]).position().top;
                            $(images[imageIndex]).css({marginTop: imageTops[imageIndex] - newImgTop + 'px'});
                            imageIndex++; // increment index so remainder spans are being evaluated against the next image
                        }
                    }
                });

                // reverse the "spanification"
                $('#column > p').each(function() {
                    $(this).html($(this).html().replace(/<\\?span>/g, '').trim());
                });
            }
        });
    //]]>
    </script>
    <style type="text/css">
    div#column {
        -moz-column-count:6;
        -webkit-column-count:3;
        column-count:3;
        -webkit-column-width:100px;
        -moz-column-width:100px;
        column-width:100px;
        height:500px;
    }

    p {
        margin:0;
        clear:left;
        font-size:15px;
        text-align:justify;
    }

    img {
        float:left;
    }
    </style>
</head>
<body>
    <div><a href="#" id="fontUp" style="margin-right:10px">Font +</a><a href="#" id="fontDown">Font -</a></div>
    <div id="column">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <img src="http://www.avatarblast.com/avatars/cool/yoda.jpg" title="yoda" alt="yoda"/>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>The change of name from <img src="http://www.avatarblast.com/avatars/cool/yoda.jpg" title="yoda" alt="yoda"/> LiveScript to JavaScript roughly coincided with Netscape adding support for Java technology in its Netscape Navigator web browser. The final choice of name caused confusion, giving the impression that the language was a spin-off of the Java programming language, and the choice has been characterized by many as a marketing ploy by Netscape to give JavaScript the cachet of what was then the hot new web-programming language. It has also been claimed that the language's name is the result of a co-marketing deal between Netscape and Sun, in exchange for Netscape bundling Sun's Java runtime with their then-dominant browser. Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc.</p>
        <p>Nam ut sapien sed pede pulvinar rutrum. Nunc eu elit sed augue aliquet tincidunt. Morbi rutrum. Vestibulum dui turpis, lobortis quis, euismod sed, consectetuer sit amet, nunc. Nam mi. Fusce at nisl eu tortor bibendum eleifend. Sed ac metus. Phasellus nec elit. Morbi tortor nulla, tristique a, adipiscing at, consectetuer et, nisi. Nunc vel sapien sed risus hendrerit egestas. Vivamus turpis arcu, placerat eu, congue vel, commodo ut, nisl.</p>
        <p>Java EE includes several API specifications, such as JDBC, RMI, e-mail, JMS, web services, XML, etc., and defines how to coordinate them. Java EE also features some specifications unique to Java EE for components. These include Enterprise JavaBeans, Connectors, servlets, portlets (following the Java Portlet specification), JavaServer Pages and several web service technologies.<img src="http://www.avatarblast.com/avatars/cool/yoda.jpg" title="yoda" alt="yoda"/> This allows developers to create enterprise applications that are portable and scalable, and that integrate with legacy technologies. A Java EE application server can handle transactions, security, scalability, concurrency and management of the components that are deployed to it, in order to enable developers to concentrate more on the business logic of the components rather than on infrastructure and integration tasks.</p>
        <p>Java (Indonesian: Jawa) is an island of Indonesia. With a population of 136 million, it is the world's most populous island, and one of the most densely populated regions in the world. It is home to 60% of Indonesia's population. The Indonesian capital city, Jakarta, is in west Java.  Much of Indonesian history took place on Java; it was the centre of powerful Hindu-Buddhist empires, Islamic sultanates, the core of the colonial Dutch East Indies, and was at the centre of Indonesia's campaign for independence. The island dominates Indonesian social, political and economic life.</p>
    </div>
</body>
</html>

关于javascript - 在 CSS 列中围绕固定 float 图像使用 JavaScript 增加字体大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5405789/

24 4 0
文章推荐： c++ - 参数类型与指针/引用不匹配
文章推荐： css - 顺风文本
文章推荐： c++ - 是否可以从 unsigned char 数据类型函数向主函数返回一个整数？
文章推荐： c++ - 与它所属的类相同类型的对象的数组是否会创建无限实例？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com