- 浏览: 25508 次
- 性别:
- 来自: 上海
-
最新评论
//控制内容
function settext()
{
var el=document.getElementById("testdiv");
el.innerHTML="测试数据!";
}
//控制位置
function setlocation()
{
var el=document.getElementById("testdiv");
el.style.top="100px";
el.style.left="100px";
}
//设置背景色
function setbrcolor()
{
var el=document.getElementById("testdiv");
el.style.backgroundColor="#997788";
}
//设置背景图
function setbrimg()
{
var el=document.getElementById("testdiv");
el.style.backgroundImage="url(img.jpg)";
}
//设置字体
function setfont()
{
var el=document.getElementById("testdiv");
el.style.color="#FFFFFF"//设置字体
el.style.fontSize="15px";
el.style.fontWeight="bold";
}
//设置calss样式
function setcss()
{
var el=document.getElementById("testdiv");
el.className="test";
}
//获得键盘按键并操作DIV上下左右移动 top left 必须加px
function GetKey(e)
{
var el=document.getElementById("testdiv");//获得DIV
e=e||event;//兼容IE FF
var Key=e.keyCode||e.which||e.charCode;//获得键盘码
//alert(Key);//弹出KEY值
if(Key=="39")//右
{
el.style.left=(parseInt(el.style.left==""?"0":el.style.left)+1)+"px";
}else if(Key=="37")//左
{
el.style.left=(parseInt(el.style.left==""?"0":el.style.left)-1)+"px";
}else if(Key=="38")//上
{
el.style.top=(parseInt(el.style.top==""?"0":el.style.top)-1)+"px";
}else if(Key=="40"){//下
el.style.top=(parseInt(el.style.top==""?"0":el.style.top)+1)+"px";
}
}
document.onkeyup = GetKey;//附加键盘按下事件
//控制宽度和高度
var el = document.getElementById("testdiv");
el.style.width="10px";/*也可用百分比*/
el.style.heigth="10px";/*也可用百分比*/
function settext()
{
var el=document.getElementById("testdiv");
el.innerHTML="测试数据!";
}
//控制位置
function setlocation()
{
var el=document.getElementById("testdiv");
el.style.top="100px";
el.style.left="100px";
}
//设置背景色
function setbrcolor()
{
var el=document.getElementById("testdiv");
el.style.backgroundColor="#997788";
}
//设置背景图
function setbrimg()
{
var el=document.getElementById("testdiv");
el.style.backgroundImage="url(img.jpg)";
}
//设置字体
function setfont()
{
var el=document.getElementById("testdiv");
el.style.color="#FFFFFF"//设置字体
el.style.fontSize="15px";
el.style.fontWeight="bold";
}
//设置calss样式
function setcss()
{
var el=document.getElementById("testdiv");
el.className="test";
}
//获得键盘按键并操作DIV上下左右移动 top left 必须加px
function GetKey(e)
{
var el=document.getElementById("testdiv");//获得DIV
e=e||event;//兼容IE FF
var Key=e.keyCode||e.which||e.charCode;//获得键盘码
//alert(Key);//弹出KEY值
if(Key=="39")//右
{
el.style.left=(parseInt(el.style.left==""?"0":el.style.left)+1)+"px";
}else if(Key=="37")//左
{
el.style.left=(parseInt(el.style.left==""?"0":el.style.left)-1)+"px";
}else if(Key=="38")//上
{
el.style.top=(parseInt(el.style.top==""?"0":el.style.top)-1)+"px";
}else if(Key=="40"){//下
el.style.top=(parseInt(el.style.top==""?"0":el.style.top)+1)+"px";
}
}
document.onkeyup = GetKey;//附加键盘按下事件
//控制宽度和高度
var el = document.getElementById("testdiv");
el.style.width="10px";/*也可用百分比*/
el.style.heigth="10px";/*也可用百分比*/
发表评论
-
monit
2015-07-19 15:51 0http://blog.csdn.net/coolboylai ... -
monit linux监控
2015-07-19 14:03 347English | VPS常用软件下载 ... -
JAVA 持久层三种查询方式
2015-01-04 09:56 432Java JPA有三种查询方式: 1)JPQL 2)Crite ... -
apache2.2设置最大连接数
2014-09-09 10:39 827Apache的最大连接数,默认为256个。 修改ap ... -
linux启动oracle
2014-06-18 12:59 408http://www.360doc.com/content/1 ... -
linux下升级openssh
2013-10-22 19:27 1537查询是否安装telnet # rpm -qa | grep ... -
javascript:history.go()和History.back()的区别
2013-10-09 16:13 710javascript:history.go()和History ... -
struts2中各个jar包的作用
2013-09-13 09:19 654struts2 jar包说明 commons-logging- ... -
js操作SELECT对象
2013-09-02 16:38 666<html> <head> <t ... -
js实现javaMap对象
2013-08-22 08:38 557<script> /*js实现map功能*/ f ... -
input中的事件及方法
2013-07-18 16:50 0input text 的事件及方法 ... -
js循环删除表格
2013-06-07 10:37 729由于表格的总条数会随着表格的删除动态改变,因此不能使用传统的f ... -
web.xm文件的作用
2013-03-18 12:11 848web工程中的web.xml文件有 ... -
myeclipse修改cvs链接地址
2013-02-18 10:23 2275由于服务器IP的地址的变更,在eclipse中要进行更改仓库的 ... -
模态窗口使用介绍
2013-01-06 15:46 612打开模态窗口 window.showModalDialog(u ... -
js操作表格的方法介绍
2012-12-07 13:44 982在web开发中使用js动态生成表格的情况非常普遍,现对常用的方 ... -
document.getElementsByTagName()方法摘要
2012-09-07 18:01 666document.getElementsByTagName() ... -
设计select语句时影响效率查询的15个情况
2012-08-27 16:20 859没有创建索引,或者没有正确使用索引; 存在死锁的情况,从而导 ... -
web.xml配置文件详解
2011-12-26 11:15 6271 定义头和根元素 ... -
struts2文件上传最大值配置
2011-12-02 16:58 660使用Struts2的文件上传控 ...
相关推荐
以下是一些主要的Div属性及其详细说明: 1. accessKey:设置或获取对象的快捷键,使得用户可以通过键盘快速激活Div元素。 2. align:设置或获取Div元素的对齐方式,可以是"left", "right", "center", "justify"等...
JavaScript 设置 Div 的 margin 参数 在 HTML 中,我们经常需要设置元素的样式,包括 margin 属性。margin 属性用于设置元素的外边距,而 JavaScript 可以帮助我们动态地设置元素的 margin 属性。 margin 属性可以...
JavaScript(JS)结合CSS3可以轻松实现div元素的圆角或者部分圆弧效果。这篇文章将深入探讨如何使用JavaScript和CSS3来创建div的圆弧效果。 【描述】虽然没有提供具体的描述,但我们可以从常规的实践出发,理解JS...
在这个场景中,"js设置浮动div的特效"指的是使用JavaScript来操控浮动的`div`元素,以实现更复杂的视觉表现。 首先,我们需要理解CSS中的`div`和`float`属性。`div`是HTML中的一个通用容器元素,常用来组织页面结构...
js去除div里class样式,自己学习的,分享给大家,大神就不要说我了,谢谢。
在JavaScript(JS)中操作HTML元素,特别是对`div`这样的块级元素进行宽度和背景颜色设置,是前端开发中的基本操作。这篇文章将详细介绍如何使用原生JavaScript来完成这两个任务。 首先,我们要知道HTML `div`元素...
1. **创建背景div层**:首先,创建一个用于遮罩的div层,通过`document.createElement("div")`创建div对象,然后使用`setAttribute`和`style`属性设置其ID、位置、颜色、大小、透明度等。此div用于模拟模态对话框的...
标题 "js实现div里面的内容滚动,并可以通过按钮控制" 涉及的是JavaScript在网页中创建动态滚动效果的技术。JavaScript是一种广泛用于网页交互的脚本语言,它可以操纵HTML元素,包括让内容在div(一个HTML布局容器)...
在探讨“div所有属性介绍和各种用法”这一主题时,我们不仅会深入解析div元素的基本属性,还将拓展到CSS中与div相关的样式属性,这些属性使得div成为了网页布局和设计中的核心元素之一。 ### div的基本概念 div是...
可能使用了`addEventListener`或`jQuery`的`click`事件来监听箭头的点击,然后改变`div`的`display`属性或者通过CSS的`transform`来实现左右移动效果。 4. **事件处理**:在JavaScript中,我们需要为左右箭头绑定...
- 通过 `style.left` 和 `style.top` 或 `style.pixelLeft` 和 `style.pixelTop` 属性动态设置 Div 的位置。 ### 二、可拖拽 Div 的实现原理 可拖拽 Div 指的是用户可以手动拖动 Div 在页面中的位置。这一功能...
这段JS代码首先获取div容器和图片元素的当前宽度和高度,然后根据图片的自然宽高比(`naturalWidth`和`naturalHeight`属性)计算出合适的尺寸。如果图片的高度超过了容器高度,就反过来调整宽度,确保图片始终适应...
在本主题“js移动div源代码”中,我们将深入探讨如何使用JavaScript来操作网页中的div元素,实现其位置的动态改变,从而创造出更丰富的用户界面。 首先,我们需要理解HTML中的`<div>`标签。`<div>`是“division”的...
在弹出窗口的设计中,`div`通常作为窗口的基础结构,通过CSS来设置其位置、大小、透明度等样式属性,使其浮于其他内容之上,形成一个视觉焦点。 接下来,我们讨论如何将这样的功能打包成JS文件。这涉及到JavaScript...
本篇将详细介绍如何利用JavaScript来创建、操作和关闭div层,并结合CSS进行样式设置。 首先,我们需要了解JavaScript的基本语法。在JavaScript中,我们可以使用`document.createElement()`方法来创建一个新的HTML...
在JavaScript(JS)中,"鼠标浮动显示div"是一种常见的交互设计,通常用于创建提示框、下拉菜单或工具提示。这种技术的核心是利用事件监听器来捕捉鼠标的移动,并根据鼠标的移动来控制div元素的显示与隐藏。在本案例...
JS日历DIV控件是一种使用JavaScript实现的轻量级日历组件,它通过在页面上动态创建一个可浮动的DIV元素来展示日历,用户可以选择日期并将其值返回到页面上的特定输入元素。 **1. JS基础知识** JavaScript(简称JS...
以上就是实现“js拖动div并拖动DIV的大小”的主要步骤和涉及的技术。实际开发中,你可以选择使用库或框架,如jQuery UI的Resizable组件,来简化这一过程。然而,理解这些基础知识将帮助你更好地理解和定制功能,特别...
在JavaScript(js)开发中,有时我们需要将网页的一部分,如div的内容,转化为图片并提供下载功能。这在数据可视化、屏幕截图或者用户自定义布局的保存场景中非常常见。本篇将详细介绍如何实现这一功能,并重点讲解...
本文介绍了几种使用JavaScript实现页面滚动到指定div位置的解决方案。这些方法主要包括锚点法、jQuery的animate方法、window.scrollTo方法和scrollIntoView方法。下面将详细解析每种方法的原理、使用方法及优缺点。 ...