Tag: html

通过Flash对象的JavaScript onclick事件

我有一个embedded在一个div内的Flash电影,我把一个JavaScript onclick事件处理程序在主div,但不捕捉点击,有什么不对? 码: <div id="top-box-player" onclick="alert('Hi Bananas!');"> <object width="400" height="300"> <param name="movie" value="general.swf"> <embed src="./swf/general.swf" width="400" height="300"> </embed> </object> </div>

replace&nbsp; 从JavaScript DOM文本节点

我正在处理使用JavaScript的xhtml。 我通过连接nodeType == Node.TEXT_NODE的所有子节点的nodeValue来获取div节点的文本内容。 结果string有时包含一个不间断的空间实体。 我如何用普通的空格字符replace它? 我的div看起来像这样… <div><b>Expires On</b> Sep 30, 2009 06:30&nbsp;AM</div> 以下在networking上发现的build议无效: var cleanText = text.replace(/^\xa0*([^\xa0]*)\xa0*$/g,""); var cleanText = replaceHtmlEntities(text); var replaceHtmlEntites = (function() { var translate_re = /&(nbsp|amp|quot|lt|gt);/g; var translate = { "nbsp": " ", "amp" : "&", "quot": "\"", "lt" : "<", "gt" : ">" }; return function(s) { return ( […]

overflow-x:hidden仍然可以滚动

问题是: 我有一个全宽的酒吧菜单,这是通过在右侧和左侧创build一个大的余量。 这个边距应该被overflow-x: hidden所裁剪,并且是…没有滚动条,一切(视觉上)都可以。 但是,如果您拖动页面(使用Mac Lion)或滚动到右侧,页面将显示一个巨大的条,该条应该已被overflow-x:hidden裁剪。 CSS html { margin:0; padding:0; overflow-x:hidden; } body { margin: 0 auto; width: 950px; } .full, .f_right { margin-right: -3000px !important; padding-right: 3000px !important; } .full, .f_left { margin-left: -3000px !important; padding-left: 3000px !important; } 这是一个链接: http : //jsfiddle.net/NicosKaralis/PcLed/1/ 你必须在草稿中看到… jsfiddle css以某种方式使其工作。 @Krazer 我有和像这样的结构: body div#container div#menu_bar div#links div#full_bar […]

同时使用jQuery timeago或者momentjs和AngularJS

我想用timeago插件使date看起来更好。 问题是这些date是通过dynamic从REST的AngularJS获取。 所以,当我将这个jQuery插件附加到我的页面时,它不会处理它。 那么,如何做得更好呢? 如果可能的话,我会很乐意运行没有jQuery。

如何在DOM中删除图像时防止内存泄漏?

webkit中有一个已知的bug ,当你从DOM中移除一个图像时,它不会释放与之关联的内存。 这是经常加载图像的单页应用程序的问题。 各种build议解决scheme是: 从DOM中删除图像之前删除图像的src属性 将图像src设置为“”,然后从DOM中删除图像 将图像从DOM中移除之前,将图像设置为单个像素图像 创build有限数量的图像元素并继续回收 前3种方法不适合我。 回收图像元素的主要缺点是,这意味着要编写大量的代码来pipe理它。 我通过可能包含图像的AJAX加载新的HTML,所以我不一定知道将被加载的图像的数量。 有没有其他的解决办法来解决这个问题?

将光标设置为<symbol>元素

我有一个HTML符号 <symbol id="arrow" viewBox="0 0 8.4666659 8.4666659"> <g transform="translate(0,-288.53334)"> <path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 0.17215798,288.70836 8.05225192,8.04935"></path> <path style="fill:none;stroke:#000000;stroke-width:0.48417112;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;" d="m 8.2221335,293.64243 0.00228,3.11528 -3.1283502,2.2e-4"></path> </g> </symbol> 我想用作光标。 我熟悉如下通过JQuery更改光标: body.css('cursor', `wait`); 但是我怎样才能做到这一点<symbol>元素?

设置overflow-x:hidden添加一个垂直滚动条

当我指定overflow-x: hidden在水平和垂直溢出的元素上时,除了隐藏水平溢出的内容之外,元素还获得垂直滚动条。 我已经尝试添加overflow-y: visible ,甚至只是overflow: visible ,没有任何效果。 我误解了这些属性呢? 我认为overflow-x应该不会影响垂直溢出。 这发生在我试过的每个浏览器上。 这是一个演示效果的片段。 我正在使用<pre>标记,因为它们是创build溢出内容的简单方法,但似乎会发生任何标记。 pre { height: 40px; width: 150px; margin-bottom: 50px; /* We need this so they don't overlap. */ } #x-hidden { overflow-x: hidden; } #y-visible { overflow-x: hidden; overflow-y: visible; } #visible { overflow: visible; overflow-x: hidden; } <pre> Lorem ipsum dolor sit amet, […]

为什么Flex项目的宽度和高度会影响Flex项目的渲染方式?

Flexbox中具有max-height样式的图像呈现不同的呈现方式,具体取决于是否设置了height和width属性。 具有设置为图像的真实宽度/高度的属性的属性将保留其宽高比,但没有属性的属性会尊重max-height并显示压扁。 .flex-parent { display: flex; max-height: 10vh; } <div class="flex-parent"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg"> <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg"> </div> 这就是Chrome 58中出现的情况(在Firefox 54中也是如此)。 为什么他们呈现不同? pipe理这种行为的规则是什么? 我的(显然是不正确的)理解是,高度和宽度属性覆盖图像加载时发现的内在高度和宽度,如果高度和宽度属性等于图像的尺寸,则一旦图像渲染应该没有区别已加载。 上下文正在制作一个响应式图像的页面,其中每个图像 可以有独特的原始尺寸 在加载时不会导致回stream,即在初始渲染时保留正确的空间(因此使用高度和宽度属性) 可以一次适合所有的屏幕(因此我搞乱在CSS中) 青蛙图片来自https://en.wikipedia.org/wiki/File:Red_eyed_tree_frog_edit2.jpg

100%与inheritance

我的理解是, width: '100%'可以让对象的宽度与父对象的宽度相同,而width: inherit只有在明确指定父宽度时才会这样做。 这种理解是否正确? 如果是这样的话,在我看来,当width: inherit工作, width: '100%'将始终工作,所以你可以随时使用后者。 那么,写width: inherit的目的是什么width: inherit ? 它什么时候变得有用? 如果我的理解错了,那么两者有什么区别呢? 与height相似。

应该将CSS属性列表样式应用于<ul> / <ol>还是<li>?

大多数站点显示的语法是将list-style应用于<li>但我已经看到了一些将list-style应用于<ul>或<ol>教程站点(如本例 )。 哪一种是“正确的”方式?