在元素的整个宽度上重复一个字符 [英] Repeating a character across the full width of an element

问题描述

我正在尝试使用JavaScript和jQuery编写函数(因为我已经在站点中使用jQuery)来检测视口的宽度并输出在整个宽度上重复的字符.

I am trying to write a function using JavaScript and jQuery (since I'm already using jQuery for my site) to detect the width of the view port and output a character repeated across the full width.

我正在尝试制作一个看起来像unix终端的网站，并且我希望表格标题使用等号在屏幕的整个宽度上重复(表格设置为width: 100%;).我知道我可能只可以制作一个等号的简单图像，并在空的标题行上使用CSS将其设置为repeat-x，但我更喜欢将其作为文本.我一直在研究数组，而这是到目前为止.

I am trying to make a website that looks like a unix terminal and I would like the table headers to use the equal sign to repeat across the width of the screen (tables are set to width: 100%;). I know I probably could just make a simple image of the equal sign and set it to repeat-x using CSS on an empty header row but I prefer it to be text. I have been playing around with arrays and this is what I have so far.

var windowWidth =$(window).width();
document.write( array( windowWidth ) ).join( '=' ) );

我知道这是不对的，但是那是我离开的地方，因为我一直无法弄清楚应该使用什么搜索词来找到答案.因此，如果有人不介意帮助我写这本书或为我指出正确的方向，我将不胜感激.

I know this is broken, but that is where I left off because I haven't been able to figure out what search terms I should be using to find an answer. So if anyone wouldn't mind either helping me write this or point me in the right direction I would appreciate it.

推荐答案

我的看法:

for (
    var x = Math.floor(
    $("body").append("<span>=</span>").width() / $($("body").children()[0]).width());

    x > 1;

    x-- && $("body").append("<span>=</span>")
);

将$("body")更改为要添加内容的任何元素.

change $("body") to whatever element you wanna add your stuff into.

http://jsfiddle.net/8suma/

这篇关于在元素的整个宽度上重复一个字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！