小编Nik*_*las的帖子

我想强调(应用css)某个文本范围,由其开始和结束位置表示.这比看起来更难以实现,因为文本中可能还有其他标记需要忽略.

例:

<div>abcd<em>efg</em>hij</div>

highlight(2, 6)需要突出显示"cdef"不删除标签.

我已经尝试过使用TextRange对象,但没有成功.

提前致谢!

更新

我最近发现,您可以通过在要取消选择或隐藏的部分之间替换元素/文本节点然后显示它们,以编程方式创建不连续的Chrome选择.

Chrome的非连续选择示例:http://jsfiddle.net/niklasvh/YKJBW/

var t = $('div').contents().get(0);


$.each(t.nodeValue.split(" "),function(i,e){
   t = t.splitText(e.length);
     if (t.length>0){
     t = t.splitText(1);
     }
});



var c = $('div').contents();

$.each(c,function(i,e){    
    if (i>0){
    if (i%3) { }else{
             e.parentNode.replaceChild($('<unselect />').text(e.nodeValue).get(0),e);                           
    }    
}   
});

$('unselect').hide(); 
window.setTimeout(function(){
   $('unselect').show();     
},0);

然而,当执行复制事件时,整个选择确实被选中(即使它们之间存在间隙),但是当然可以使用相同的方法以编程方式在执行复制事件之前改变选择.

现在棘手的部分是,你可以通过按住Ctrl键来实际使用这个功能,就像你在Firefox中创建非连续选择一样.我在示例中使用的当前方法将TextNodes分成许多部分,出于视觉目的没有区别.然而,它也使用额外的标签来打破选择,据我发现,无法删除.但是,可以通过删除TextNodes并为其添加新的TextNodes来实现相同的功能.问题是它只会考虑添加的最后一个节点,因此如果您的选择中有多个空格,它将只考虑您应用的最后一个DOM更改.

任何人都可以想到任何非文档破解方法来应用这种非连续选择,这些选择不会对选择及其元素进行任何永久性更改吗？

原来的问题

是否可以在Google Chrome中进行不连续的选择？例如,如果您的元素包含如下文本:

<div>this is some random text</div>

是否有可能作出的选择包含例如this is和text使文字在两者之间未选择？

这似乎在FF中工作正常,你可以在其中添加彼此不相邻的范围,并相应地进行选择.

对于IE,似乎没有任何东西允许你有多个范围,但IE的选择对象有很多其他方法来补偿它.

对于非连续选择,您可以始终在网站上附加或预先选择某个部分,例如在执行复制操作时,或强制用户取消选择您不希望他们复制的选择的某些部分.

非连续选择的例子:

工作示例(至少在FF4中工作).

编辑 要手动执行相同类型的选择,您可以使用firefox按住ctrl并开始在不同位置拖动文本,但在chrome上执行它不起作用.

编辑2 我猜这个,这总结得很好.就webkit浏览器而言,似乎没有任何预期.

我一直致力于通过让javascript从加载的DOM中读取所有必要信息,将HTML呈现到画布图像中的实验.由于canvas缺少CSS的许多标准部分,特别是在文本格式化方面,需要完成大量的工作和性能密集的过程(例如letter-spacing).目的是并且永远不会制作一个简单的HTML渲染器,因为它根本不可能,而是尝试尽可能准确.

对于示例页面,Google Chrome通常会以比FF快得多的速度加载它们.但是,对于某些页面(通常是较大的页面),Chrome会完全冻结,而Firefox会加载它们.现在,我一直试图找出确切的事情在哪里乱七八糟,但没有多少运气,因为它最终不会在Chrome中输出任何内容.

Chrome是否限制了在特定时间范围内可以执行多少画布绘制,或者页面可以使用多少系统资源？如果我根本无法从页面获得任何反馈(因为它只是挂起),我怎么能开始解开瓶颈？

示例(它应该做什么,是在页面顶部渲染画布图像,它应该看起来与实际HTML页面大致相同.您可以通过单击来切换画布图像(显示/隐藏).请不要如果您在浏览器中有未保存的工作,请打开它们,因为它可能最终也会挂起它们.):

简单测试,在FF/Chrome中工作正常

另一个简单的测试,在FF/Chrome中运行良好

完整页面,在FF/Chrome中运行良好

完整页面,仅适用于FF <4,Chrome冻结

他们都使用相同的js,可以在这里找到.

我不是在寻找一个超快速的脚本,就像渲染图像的仿真类型一样,我认为它甚至都不能完成.只是试图找到方法使它可能稍微更高效,而不会失去任何当前的功能.

在下面的jquery函数中,z-index在IE7中不起作用,请帮帮我

<script>
$(function() {
    $('span').hover(function() {

        $(this).stop().css({                      
            'float': 'left',
        'z-index':'15'
        }).animate({
            marginTop: '0px',
            marginLeft: '0px',            
            width: '200px',
            height: '125px',
            padding: '0px'

        }, 700, 'swing');


    }, function() {

        $(this).stop().css({            
            'border': '0px',
            'z-index':'10'
        }).fadeIn('slow').animate({
            marginTop: '0px',
            marginLeft: '0px',            
            width: '40px',
            height: '13px'            
        }, 700, 'swing');


    });
});

</script>

非常感谢.我是jquery的新手.

可以在没有任何用户交互的情况下创建Selection对象吗？window.getSelection()确实返回一个Selection对象,但除非用户进行了某种选择,否则你不能 修改它.

是否有可能创建一个从页面的第一个元素开始然后能够进行的选择modify(),而无需用户做任何事情？

示例:http://jsfiddle.net/niklasvh/L5M3U/

它不会在页面加载时选择任何内容,但如果您单击任何内容,它确实会进行选择.

如果我有像这样的HTML,如何交替(偶数和奇数)替换div内的div的样式(背景颜色与jquery)div = id ="container"

<div id="container">
   <div></div> 
   <div></div>
   <div></div>
   <div></div>
...
</div>

我知道桌子就像

#tbl_users tr:nth-child(even) {background: #CCC;}
#tbl_users tr:nth-child(odd) {background: #FFF;}

但如何应用这样的东西？

我有一个无序列表,每个元素有多个属性,我想找到具有这两个属性的所有元素.

var results = $('#mylist').find(function() {
    return
        $(this).attr('data-label') == 'red' &&
        $(this).attr('data-size') == 1;
});

我在下面的链接中附加了一个示例:

http://jsfiddle.net/nbz4H/1/

我试图从(任何)外部swf文件中捕获一个静止帧,通过使用我自己的flash影片作为代理加载它并将关于舞台的信息传递到javascript.我希望尽可能保持兼容性,所以我现在使用AS2/Flash 8.

该脚本在Flash调试器中工作正常,即

trace(flash2canvasScreenshot.getPixel(w, h).toString(16));

返回正确的像素颜色,其中:

ExternalInterface.call("sendToJS",flash2canvasScreenshot.getPixel(w, h).toString(16));

在已发表的电影中没有.

对于大型闪存(尺寸方面)电影,这种方法显然可能非常慢,因为它迭代每个像素.如果有人有任何更好的方法,请随意分享,但正如所说,我面临的问题是我在调试和发布方面得到了不同的结果,在发布时没有获取像素信息.

import flash.display.BitmapData;
import flash.external.*;

var myLoader:MovieClipLoader = new MovieClipLoader();
var mclListener:Object = new Object();

mclListener.onLoadInit = function(target_mc:MovieClip)
{

        var stageW = Stage.width;
        var flash2canvasScreenshot:BitmapData = new BitmapData(stageW, Stage.height, false, 0x00000000);
        var pixels:Array = new Array();
        flash2canvasScreenshot.draw(element);

        for (w = 0; w <= stageW; w++)
        {
            trace(flash2canvasScreenshot.getPixel(w, h).toString(16)); // this gives correct color value for the pixels in the debugger
            ExternalInterface.call("sendToJS",flash2canvasScreenshot.getPixel(w, h).toString(16)); // this just returns the bitmap default color, 0 …

基本上我希望当你在该网站上时,链接的悬停状态保持活动状态.我希望我能解释这一点.当您访问该特定页面时,该链接背后应该有背景.

这是html的代码:

<div class="menudiv">
<div id="menu">
    <ul id="menu">
      <li><a href="?p=start"><span>Hem</span></a></li>
      <li><a href="?p=omoss"><span>Om oss</span></a></li>
      <li><a href="?p=tjanster"><span>Tjänster</span></a></li>
      <li><a href="?p=referenser"><span>Referenser</span></a></li>
      <li><a href="?p=kontakt"><span> Kontakt</span></a></li>
    </ul>
  <div class="clr"></div>
  </div>
  </div>

这是css:

#menu { float:right; padding:23px 0 0 0; margin:0; width:420px; height:35px;}
#menu ul { text-align:right; padding:0; margin:0; list-style:none; border:0; height:35px;}
#menu ul li { float:left; margin:0; padding:0 5px; border:0; height:35px;}
#menu ul li a { float:left; margin:0; padding:10px 0; color:#5c8783; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
#menu ul li a span { padding:10px 13px; background:none;} …