模拟jq的设置样式
//需求,创建一个div,添加到页面上,给div添加属性
//面向对象开发,构造函数创建类
function divTag(){
this.div1=document.createElement('div');
this.appendTo=function(node){
node.appendChild(this.div1);
return this;//将构造函数的new的新对象返回,因为它里面有这两个方法,所以才能链式操作
}
this.css=function(obj){
for(var k in obj){
this.div1.style[k]=obj[k];
};
return this;//将构造函数的new的新对象返回,因为它里面有这两个方法,所以才能链式操作
};
}
//实例化
var div =new divTag();
div.css({
'border':'1px dotted red',
'width':'100px',
'height':'200px'
}).appendTo(document.body);
模拟jq的设置样式的更多相关文章
- jQ的隐式迭代和设置样式属性
jQ中的隐式迭代 意义:不需要原生迭代了,在jQ内部自动帮你实现了循环 代码实现: let arr = document.querySelectorAll('li') for(let i = 0;i ...
- css3模拟jq点击事件
还是这个梗,收好冷.今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照 jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮 ...
- jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息
jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...
- (20)jQuery的文档操作(创建,添加、设置样式和删除等)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jq ...
- word-wrap&&word-break,奇偶行、列设置样式
1.word-wrap和word-break区分. 来源场景:机械租赁mvc驾驶员信息查看: 当备注的文字多的时候,第一列的值成这模样: 解决方案:设置table 的td可自动换行.首先table设置 ...
- 注意Android里TextView控件的一个小坑,用android:theme来设置样式时动态载入的layout会丢失该样式
注意Android里TextView控件的一个小坑,用android:theme来设置样式时动态载入的layout会丢失该样式 这个坑,必须要注意呀, 比如在用ListView的时候,如果在List_ ...
- Vue系列: 如何通过组件的属性props设置样式
比如我们要在vue中显示百度地图,然后将相关的代码包装成组件,然后需要由外部来设置组件的高度,关于props的介绍,可以参考: http://cn.vuejs.org/guide/components ...
- 【使用 DOM】为DOM元素设置样式
1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...
- 【温故而知新-Javascript】为DOM元素设置样式
1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...
随机推荐
- 大数据学习--day17(Map--HashMap--TreeMap、红黑树)
Map--HashMap--TreeMap--红黑树 Map:三种遍历方式 HashMap:拉链法.用哈希函数计算出int值. 用桶的思想去存储元素.桶里的元素用链表串起来,之后长了的话转红黑树. T ...
- Python用@property使类方法像属性一样访问
class Screen(object): @property #读取with的值getter方法 def width(self): return self._width @width.setter ...
- Vue2.5入门-1
vue如何引用和使用,实例和挂在点的介绍 <!DOCTYPE html> <html> <head> <title>vue 入门</title&g ...
- vue搭建项目
vue-cli 作用:快速搭建项目脚手架 安装3.0:npm i -g @vue/cli 安装桥接工具:npm i -g @vue/cli-init (vue-cli 3和旧版使用相同的命令,所以2被 ...
- Hystrix使用
Hystrix是Netflix开源的一款容错系统,能帮助使用者码出具备强大的容错能力和鲁棒性的程序.如果某程序或class要使用Hystrix,只需简单继承HystrixCommand/Hystrix ...
- 20155209 实验三 敏捷开发与XP实践
20155209 实验三 敏捷开发与XP实践 实验内容 1. XP基础 2. XP核心实践 3. 相关工具 提交点一: 在IDEA中使用工具(Code->Reformate Code)把下面代码 ...
- 20155222 卢梓杰 myod
20155222 卢梓杰 myod 复习c文件处理内容 编写myod.c 用myod XXX实现Linux下od -tx -tc XXX的功能 main与其他分开,制作静态库和动态库 编写Makefi ...
- 20155230 实验二《Java面向对象程序设计》实验报告
20155230 实验二<Java面向对象程序设计>实验报告 一.单元测试 三种代码 知道了伪代码.产品代码.测试代码的关系和用途,并根据老师的例子,按测试代码调试了产品代码. 值得注意的 ...
- 20155305 2016-2017-2 《Java程序设计》 实验五 Java网络编程及安全实验报告
20155305 2016-2017-2 <Java程序设计> 实验五 Java网络编程及安全实验报告 实验内容 1.掌握Socket程序的编写. 2.掌握密码技术的使用. 3.设计安全传 ...
- JS操作数组的常用方式
一.JS操作数组一:删除指定的元素 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. //查找指定元素下标 Array.prototype.indexOf = function ...