`
zyz
  • 浏览: 25508 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js设置DIV属性

 
阅读更多
  //控制内容  
    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";/*也可用百分比*/
分享到:
评论

相关推荐

    Js Div属性大全

    以下是一些主要的Div属性及其详细说明: 1. accessKey:设置或获取对象的快捷键,使得用户可以通过键盘快速激活Div元素。 2. align:设置或获取Div元素的对齐方式,可以是"left", "right", "center", "justify"等...

    JavaScript设置Div的margin参数

    JavaScript 设置 Div 的 margin 参数 在 HTML 中,我们经常需要设置元素的样式,包括 margin 属性。margin 属性用于设置元素的外边距,而 JavaScript 可以帮助我们动态地设置元素的 margin 属性。 margin 属性可以...

    JS实现div圆弧

    JavaScript(JS)结合CSS3可以轻松实现div元素的圆角或者部分圆弧效果。这篇文章将深入探讨如何使用JavaScript和CSS3来创建div的圆弧效果。 【描述】虽然没有提供具体的描述,但我们可以从常规的实践出发,理解JS...

    js设置浮动div的特效

    在这个场景中,"js设置浮动div的特效"指的是使用JavaScript来操控浮动的`div`元素,以实现更复杂的视觉表现。 首先,我们需要理解CSS中的`div`和`float`属性。`div`是HTML中的一个通用容器元素,常用来组织页面结构...

    js去除div里class样式

    js去除div里class样式,自己学习的,分享给大家,大神就不要说我了,谢谢。

    原生js div设置宽度_div设置背景颜色代码

    在JavaScript(JS)中操作HTML元素,特别是对`div`这样的块级元素进行宽度和背景颜色设置,是前端开发中的基本操作。这篇文章将详细介绍如何使用原生JavaScript来完成这两个任务。 首先,我们要知道HTML `div`元素...

    js 创建div层

    1. **创建背景div层**:首先,创建一个用于遮罩的div层,通过`document.createElement("div")`创建div对象,然后使用`setAttribute`和`style`属性设置其ID、位置、颜色、大小、透明度等。此div用于模拟模态对话框的...

    js 实现div里面的内容滚动,并可以通过按钮控制

    标题 "js实现div里面的内容滚动,并可以通过按钮控制" 涉及的是JavaScript在网页中创建动态滚动效果的技术。JavaScript是一种广泛用于网页交互的脚本语言,它可以操纵HTML元素,包括让内容在div(一个HTML布局容器)...

    div所有属性介绍 和各种用法

    在探讨“div所有属性介绍和各种用法”这一主题时,我们不仅会深入解析div元素的基本属性,还将拓展到CSS中与div相关的样式属性,这些属性使得div成为了网页布局和设计中的核心元素之一。 ### div的基本概念 div是...

    js控制div左右切换带左右箭头

    可能使用了`addEventListener`或`jQuery`的`click`事件来监听箭头的点击,然后改变`div`的`display`属性或者通过CSS的`transform`来实现左右移动效果。 4. **事件处理**:在JavaScript中,我们需要为左右箭头绑定...

    javascript浮动div,可拖拽div,遮罩层(div和iframe实现)

    - 通过 `style.left` 和 `style.top` 或 `style.pixelLeft` 和 `style.pixelTop` 属性动态设置 Div 的位置。 ### 二、可拖拽 Div 的实现原理 可拖拽 Div 指的是用户可以手动拖动 Div 在页面中的位置。这一功能...

    通过JS自动调整图片的大小以适应div的高和宽

    这段JS代码首先获取div容器和图片元素的当前宽度和高度,然后根据图片的自然宽高比(`naturalWidth`和`naturalHeight`属性)计算出合适的尺寸。如果图片的高度超过了容器高度,就反过来调整宽度,确保图片始终适应...

    js移动div源代码

    在本主题“js移动div源代码”中,我们将深入探讨如何使用JavaScript来操作网页中的div元素,实现其位置的动态改变,从而创造出更丰富的用户界面。 首先,我们需要理解HTML中的`<div>`标签。`<div>`是“division”的...

    javascript div弹出窗口 可封装为JS类

    在弹出窗口的设计中,`div`通常作为窗口的基础结构,通过CSS来设置其位置、大小、透明度等样式属性,使其浮于其他内容之上,形成一个视觉焦点。 接下来,我们讨论如何将这样的功能打包成JS文件。这涉及到JavaScript...

    js 创建 div层

    本篇将详细介绍如何利用JavaScript来创建、操作和关闭div层,并结合CSS进行样式设置。 首先,我们需要了解JavaScript的基本语法。在JavaScript中,我们可以使用`document.createElement()`方法来创建一个新的HTML...

    js鼠标浮动显示div

    在JavaScript(JS)中,"鼠标浮动显示div"是一种常见的交互设计,通常用于创建提示框、下拉菜单或工具提示。这种技术的核心是利用事件监听器来捕捉鼠标的移动,并根据鼠标的移动来控制div元素的显示与隐藏。在本案例...

    js日历DIV控件

    JS日历DIV控件是一种使用JavaScript实现的轻量级日历组件,它通过在页面上动态创建一个可浮动的DIV元素来展示日历,用户可以选择日期并将其值返回到页面上的特定输入元素。 **1. JS基础知识** JavaScript(简称JS...

    js拖动div并拖动DIV的大小

    以上就是实现“js拖动div并拖动DIV的大小”的主要步骤和涉及的技术。实际开发中,你可以选择使用库或框架,如jQuery UI的Resizable组件,来简化这一过程。然而,理解这些基础知识将帮助你更好地理解和定制功能,特别...

    js将div的内容保存成图片并下载插件

    在JavaScript(js)开发中,有时我们需要将网页的一部分,如div的内容,转化为图片并提供下载功能。这在数据可视化、屏幕截图或者用户自定义布局的保存场景中非常常见。本篇将详细介绍如何实现这一功能,并重点讲解...

    JS控制div跳转到指定的位置的几种解决方案总结

    本文介绍了几种使用JavaScript实现页面滚动到指定div位置的解决方案。这些方法主要包括锚点法、jQuery的animate方法、window.scrollTo方法和scrollIntoView方法。下面将详细解析每种方法的原理、使用方法及优缺点。 ...

Global site tag (gtag.js) - Google Analytics