HTML5的Rang对象

最新推荐文章于 2023-08-03 22:02:44 发布
最新推荐文章于 2023-08-03 22:02:44 发布
阅读量86 收藏
点赞数
原文链接：http://www.cnblogs.com/zhangananjiayou/p/7220870.html
版权

基本概念

Range对象代表页面上的一段连续的区域。通过Range对象，可以获取或修改网页上的任何区域。
Selection与Range对象的使用

<body>
    <script>
        function rangeTest() {
            var html;
            showRangeDiv=document.getElementById("showRange");
            selection=document.getSelection();

            if(selection.rangeCount>0){
                html="选取成功>"+selection.rangeCount+"<内容<br/>>";
                for(var i=0;i<selection.rangeCount;i++){
                    var range=selection.getRangeAt(i);
                    html+="第"+(i+1)+"段内容为："+range+"<br/>";
                }
                showRangeDiv.innerHTML=html;
            }
        }
    </script>
    Selection与Range对象的使用
    <input type="button" value="点击" onclick="rangeTest()">
    <div id="showRange"></div>
</body>

selectNodeContents和selectNode

<body>
    <script>
        function deleteRangeContent(onlyContent) {
            var div=document.getElementById("div");
            var rangeObj=document.createRange();
            if(onlyContent){
                rangeObj.selectNodeContents(div);//内容开始和内容结束
                rangeObj.deleteContents();
            }else{
                rangeObj.selectNode(div);//元素开始和元素结束
                rangeObj.deleteContents();
            }
        }
    </script>

    <div id="div" style="background-color: blueviolet;width: 300px;height: 50px">
        这里是div元素的内容
    </div>
    <button onclick="deleteRangeContent(true)">删除内容</button>
    <button onclick="deleteRangeContent(false)">删除元素</button>
</body>

转载于:https://www.cnblogs.com/zhangananjiayou/p/7220870.html

weixin_30740295
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
rang-de
03-28
欢庆的模因
h5 range实现slider滑块功能及样式自定义
IT老五
07-16 2794
公司最近人手不足，于是，又开始折腾起Html来了 本文主要讲slider滑块的实现、样式自定义、刻度绘制、与输入框的联动 我们先来看看效果图 h5 slider.gif 上图中，我们需要实现的难点就是那个绿色的滑块，其它都是输入框及文本框，容易实现。 滑块的实现 其实，只要设置input的type，即可实现滑块功能 &lt;input i...
html里range怎么改样式,CSS之修改input range样式 [ lion1ou ]
weixin_29209805的博客
06-23 1393
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？今天来探讨一下 HTML5 的 range 这个新的 input 类型，不过重点不是在 range 要如何使用，而是在如何去改变 range 的样式，做出一个漂漂亮亮的滑动杆。过去我们要制作美美的滑动杆 ( range slider )，不外乎就是用个 span 或 div ，搭配判断滑鼠座标 ( pageX、pageY...
HTML5 对象
最新发布
2301_78284036的博客
08-03 62
现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。
html中range类型的定义,HTML5中的Range对象的研究
weixin_31739613的博客
06-25 1996
一、Range对象的概念Range对象代表页面上的一段连续区域，通过Range对象，可以获取或修改页面上的任何区域，可以通过如下创建一个空的Range对象，如下：var range = document.createRange();在html5中，每一个浏览器窗口及每一个窗口中都有一个selection对象，代表用户鼠标在页面中所选取的区域，(注意：过测试IE9以下的浏览器不支持Selection...
常见的支持HTML5,HTML5 中最常见的内置对象
weixin_42349135的博客
06-26 102
前言我们想想要将JavaScript运用到我们的iOS开发中,我们还需要学习两个内置对象:即window和document对象.1, windowwindow的特点1> 所有的全局变量都是window的属性2> 所有的全局函数都是它的函数Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也...
Rang-Apps
03-09
Rang-Apps
Rang:deno排名！
05-26
Rang带有易于使用的可组合API，您可以在其中链接和嵌套所需的样式。 import { rang } from "https://deno.land/x/rang/mod.js" ; const log = console . log ; // Combine styled and normal strings log ( rang ....
hexed:由Rang3r编写的Hexeditor ocx控件
05-11
Title: VB HexEditor by Rang3r ( Örebro )Date: 1/9/2001 5:56:05 PMUrl: ... delete / insert bytescopy paste data in both hex/text mode, delete/insert
rang_seek_bar
10-29
rang_seek_bar 范围控件 例如:价格范围，距离范围.
自定义(滑动条)input[type="range"]样式
热门推荐
清风的博客
06-02 12万+
这是我的第一篇博文，也是我这个小白努力的起点。刚接触JavaScript没多久，如果文中有错误的地方欢迎大家指正，或者给予建议，让我能逐渐向大牛靠拢。今天这篇文章给大家带来的是关于美化Slider Bar的相关内容。Range是HTML5中新出现的滑块控件，也是常见的控件的之一，不过这个控件的原始样式略丑，所以想对它进行一些改造。需要注意的是Internet Explorer 9及更早IE版本并不支
html5内置对象,HTML5 中最常见的内置对象
weixin_34916178的博客
06-25 209
前言我们想想要将JavaScript运用到我们的iOS开发中,我们还需要学习两个内置对象:即window和document对象.1, windowwindow的特点1> 所有的全局变量都是window的属性2> 所有的全局函数都是它的函数Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也...
html5创建对象的方法,Javascript对象
weixin_31727797的博客
06-21 432
对象(Object)是属性的无序集合，每个属性都有自己的名字和值，每个属性存放一个原始值、对象或函数。javascript的原始类型包括数字、字符串、布尔值、null、undefined。其它所有值都是对象。javascript中，数组、函数、正则表达式都是对象。一、创建对象### 1.1 new操作符后面跟Object构造函数var person = new object();### 1.2 对...
html range样式修改,自定义(滑动条)input[type="range"]样式
weixin_39551554的博客
06-04 1751
这是我的第一篇博文，也是我这个小白努力的起点。刚接触JavaScript没多久，如果文中有错误的地方欢迎大家指正，或者给予建议，让我能逐渐向大牛靠拢。今天这篇文章给大家带来的是关于美化Slider Bar的相关内容。Range是HTML5中新出现的滑块控件，也是常见的控件的之一，不过这个控件的原始样式略丑，所以想对它进行一些改造。需要注意的是Internet Explorer 9及更早IE版本并不...
html range类型的使用
qq_37119902的博客
03-22 3418
&lt;!DOCTYPE html&gt; &lt;meta charset="utf-8"&gt; &lt;html&gt; &lt;body&gt; &lt;form action="demo_form.php" method="get"&gt; 请输入数值：&lt;input type="range" name="range1
range+标签+html5,HTML5的Rang对象
weixin_29080843的博客
06-21 274
基本概念Range对象代表页面上的一段连续的区域。通过Range对象，可以获取或修改网页上的任何区域。Selection与Range对象的使用function rangeTest() {var html;showRangeDiv=document.getElementById("showRange");selection=document.getSelection();if(selection.r...
html5创建对象的三种方式
TimyChen的博客
01-04 1580
创建对象有很多种方法，最常用的有直接创建对象、使用对象字面量、为对象添加方法等。 直接创建对象： example var myData=new Object(); myData.name="Marry"; myData.feel="love"; document.writeln("hello "+myData.name+"."); document.w
HTML5中File对象初探
weixin_30444105的博客
09-14 373
在 HTML 5 中，JavaScript 得以获得更多的权限来处理文件，而不再像这之前，只能获得一个 file input 的 DOM。根据W3C的草案，JavaScript 被允许获得文件的"文件名"，"大小"，"文件类型"等等信息，并允许通过一些不同形式的方法，获得文件的内容，并将其通过 Ajax 传送。事实上，已经有部分浏览器开始支持这一特性。但这并不意味着在这些浏览器中可以任意地访问用户...
matlab rang
03-13
e函数是什么意思？ Matlab中的range函数用于计算矩阵或向量中元素的范围。具体来说，它返回矩阵...例如，如果有一个向量v=[1, 3, 5, 7, 9]，那么range(v)将返回8，因为最大元素是9，最小元素是1，它们之间的差值是8。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值