在“js”中怎么设置div的背景图片

在“js”中怎么设置div的背景图片,第1张

有两种比较直接的方式,

第一种方法:预先设置一个样式,然后在js中 *** 作,给div加上这个class。

html代码

-----

<div id="test"></div>

-----

预先设置一个样式:

-----

bg {

background-image: url(xxxjpg);

}

-----

然后js获取这个div,给div加上名为bg的class

-----

var div = documentgetElementById('test');

divclassName += ' bg';

-----

第二种方法,直接设置div的style属性:

-----

var div = documentgetElementById('test');

divstylebackgroundImage = 'url(xxxxxx)';

-----

var checkboxes = documentgetElementById('yourId')getElementsByTagName('checkbox');

for ( var i; i< checkboxeslength; i++){

if(checkboxes[i]checked==true){

checkboxes[i]parentNodestylebackgroundColor="#369";

}

}

把上面的js,改动一下yourId,和背景颜色值,放到你的查询输出后的yourId标签外部后面。

手写代码,不保证正确。

大概是看明白了你的意思

要获取背景的位置需要在CSS中先定义位置,然后获取坐标--- *** 作数据---回写就是这么个流程

我给你写了段代码,你看看是不是这个效果,获取坐标的方法你应该能看懂,很简单

<script type="text/javascript">

function bdgo(){

position = documentgetElementById('divs')stylebackgroundPositionreplace(/px/g,"");

xy = positionsplit(" ");

x = xy[0];

y = xy[1];

y = y - 1;

documentgetElementById('divs')stylebackgroundPosition = x + "px " + y + "px";

windowsetTimeout('bdgo()',30);

}

</script>

<div id="divs" style=" width:500px; height:200px; border:#333 1px solid; background:url(bjpg) repeat-y; background-position:0px 0px" onmouseover="bdgo()"></div>

1、用JS定义一个数组,里面存放你想要随机展示的

2、用JS产生一个随机数,当然这个随机数从0开始到imgArrlength-1结束

代码如下:

var index =parseInt(Mathrandom()(imgArrlength-1));

就得到当前随机产生的

代码如下:

var currentImage=imgArr[index];

3、既然随机产生了一张背景图,那就用JS把这个作为背景图。

代码如下:

documentgetElementById("BackgroundArea")stylebackgroundImage="url("+currentImage+")";

由于这是一个demo,所以在页面上定义了一个id为BackgroundArea的div,同时也是为这个div设置随机背景的。

代码如下:

<div id="BackgroundArea">

</div>

创建三个类名,三个类名分别给上三个背景颜色,如:

bgColor0{background-color:#158AEA;}

bgColor1{background-color:#996633;}

bgColor2{background-color:#66FF00;}

获取012三个随机数前面添加字符串'bgColor'就得到随机的类名,然后给相应的元素添加得到的随机类名就行了。

而要获取012三个随机数就用Mathfloor(Mathrandom()3)获取。

不过你要求背景色不能重复,那么就把三个类名放进一个数组里。已经使用的类名就用”数组名shift“把它从数组中d出。然后剩下的两个类名就要获取01两个随机数,就用Mathfloor(Mathrandom()2)获取0和1其中一个数。

剩下的你知道该怎么做了。

你可以先加入以下的 function: function randomBG() { var bgArray = new Array("a"

"b"

"c") 先设定一阵列bgArray,括号里面打番背景的名称,每个用引号引住,用逗号分隔 var i = Mathfloor(Mathrandom() 3) 设定一个随机乱数i,注意 Mathrandom() 后面的数字是总数 documentbodybackground = bgArray[i] 设定背景为bgArray 阵列中的第 i 项 } 然后在 body onLoad="randomBG()" 即成 范例: rapidshare/files/46316444/Templatezip 2007-08-01 20:20:09 补充: 若要加在 Xanga

先到 Edit - Look and Feel找到 Website Stats (在最底)

在下面打番:script (前有 但我不打因为会 Show 唔到后面D 野)var bgArray = new Array("a"

"b"

"c")var i = Mathfloor(Mathrandom() 3)documentbodybackground = bgArray[i] /script 2007-08-01 20:24:25 补充: Blogger:右上角customize

再按 Edit HTML

就可以自己插入javascript 2007-08-01 20:41:20 补充: But Wordpress does not allow user to add Javascripts

so the above is not practicalSee what Wordpress saysfaqwordpress/2006/05/07/javascript-can-i-use-that-on-my-blog/Sorry for that

<script type="text/javascript">

function updataBackground (ele){

elestylebackground = "#000";

return false;

}

</script>

<a href="javascript:void(0);" onclick="return updataBackground(this);">公司概况</a>

以上就是关于在“js”中怎么设置div的背景图片全部的内容,包括:在“js”中怎么设置div的背景图片、页面加载的时候用js如何获取到checkbox已经选中 改变选中的tr的背景颜色 急求答案 !!!!、请问一下关于javascript动态调整背景图片位置的代码等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9473366.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-28
下一篇2023-04-28

发表评论

登录后才能评论

评论列表(0条)

    保存