用于切换文档背景颜色的javascript按钮

  • 时间:
  • 分类: Python

大家好, 我需要使用JavaScript创建一个按钮,即当我单击它时,它将从白色变为黑色和向后更改背景颜色. 我的意思是,每次击中它时,都会在白色和黑色之间更改Colo. 您能为此告诉我JavaScript吗?

# 回答1

到目前为止,您有什么?
# 回答2

我有代码可以在2种背景颜色之间更改. 这是背景 我想更改网页的身体的颜色. 代码是:

选择 | 换行 | 行号
  1. function changeBackgroundColor()
  2.         {
  3.             var backColor = new String();
  4.  
  5.             backColor = document.getElementById().style.backgroundColor;
  6.  
  7.                         if(backColor.toLowerCase()=='#e2e2e2' || backColor.toLowerCase()=='rgb(227, 227, 227)')
  8.             {
  9.                 document.getElementById().style.backgroundColor = '#000000';
  10.             }
  11.             else
  12.             {
  13.                 document.getElementById().style.backgroundColor = '#e2e2e2';
  14.             }
  15.         }
# 回答3

实际上,整个项目就是这样:我想拥有一个按钮(或网页中的任何对象,现在并不重要),当我单击它时,它将更改两个 标题的BG图像 和 身体的背景颜色 还向后工作. 到目前为止的代码: 改变身体BG颜色:

选择 | 换行 | 行号
  1. function changeBackgroundColor()
  2.         {
  3.             var backColor = new String();
  4.  
  5.             backColor = document.getElementById("body").style.backgroundColor;
  6.             if(backColor.toLowerCase("body")=='#e2e2e2' || backColor.toLowerCase("body")=='rgb(227, 227, 227)')
  7.             {
  8.                 document.getElementById("body").style.backgroundColor = '#000000';
  9.             }
  10.             else
  11.             {
  12.                 document.getElementById("body").style.backgroundColor = '#e2e2e2';
  13.             }
  14.         }
  15.  

更改标头图像 (这是一个更改图像,但我也想向后工作)

选择 | 换行 | 行号
  1.     function changeHeaderImage()
  2.     {
  3.         var imgPath = new String();
  4.         imgPath = document.getElementById("header").style.backgroundImage;
  5.  
  6.         if(imgPath == "url(images/header_bg.jpg)" || imgPath == "")
  7.         {
  8.             document.getElementById("header").style.backgroundImage = "url(images/header_black.jpg)";
  9.         }
  10.         else
  11.         {
  12.             document.getElementById("header").style.backgroundImage = "url(images/header_bg.jpg)";
  13.         }
  14.     }
  15.  

谢谢你的帮助.

# 回答4

因此,基本上您只想调用两个功能? 为什么不这样做呢?
# 回答5

因为他们不起作用. 到目前为止,我只是成功地更改了标头的BG图像,并且它无法向后工作.
# 回答6

好吧,首先,如果您想改变身体的背景颜色,则使用 document.bgcolor . 至于背景图像,运行该代码没有问题. 除了您的背景和图像之间的外部空间外,它的工作正常. 但是我认为这是一个换位错误,否则它甚至第一次也不会运行.
# 回答7

我的意思是向后说的是,我想每次点击按钮时都要更改图像(或颜色),而不仅仅是两次. 对不起,我的英语不是很好.
# 回答8

我知道你的意思. 这个对我有用.
# 回答9

由于某种原因,它对我不起作用,因此我使用了一个更改CSS课程并起作用的脚本. 我有上面的代码要更改(切换是我要寻找的单词)BG颜色,但我无法正常工作.

选择 | 换行 | 行号
  1. function changeBackgroundColor()
  2.         {
  3.             var backColor = new String();
  4.  
  5.             backColor = document.backgroundColor;
  6.             if(backColor.toLowerCase()=='#e2e2e2' || backColor.toLowerCase()=='rgb(227, 227, 227)')
  7.             {
  8.                 document.backgroundColor = '#0f0f0f';
  9.             }
  10.             else
  11.             {
  12.                 document.backgroundColor = '#e2e2e2';
  13.             }
  14.         }
# 回答10

我将上一个脚本更改为

选择 | 换行 | 行号
  1. function changeBackgroundColor()
  2.         {
  3.             var backColor = new String();
  4.             backColor = document.body.style.backgroundColor;
  5.             if(backColor.toLowerCase()=='#0f0f0f' || backColor.toLowerCase()=='rgb(15, 15, 15)')
  6.             {
  7.                 document.body.style.backgroundColor = '#ffffff';
  8.             }
  9.             else
  10.             {
  11.                 document.body.style.backgroundColor = '#0f0f0f';
  12.             }
  13.         }

有效. 谢谢

# 回答11

嗨,一种更好的方法是使用CSS选择器 /类分配不同的配色方案,然后您可以使用JavaScript在它们之间切换它们 将类添加到元素中:

选择 | 换行 | 行号
  1. document.getElementById("MyElement").className += " MyClass";
  2.  

从元素中删除类:

选择 | 换行 | 行号
  1. document.getElementById("MyElement").className = 
  2.    document.getElementById("MyElement").className.replace
  3.       ( /(?:^|\s)MyClass(?!\S)/ , '' )
  4. /* code wrapped for readability - above is all one statement */
  5.  

在一个野外活动中这样做:

选择 | 换行 | 行号
  1. <script type="text/javascript">
  2.     function changeClass()
  3.     {
  4.         // code examples from above
  5.     }
  6. </script>
  7. ...
  8. <button onclick="changeClass()">My Button</button>
  9.  

更好的是,请使用一个框架(在此示例jQuery中),该框架允许您执行以下操作:

选择 | 换行 | 行号
  1. $j('#MyElement').addClass('MyClass');
  2.  
  3. $j('#MyElement').removeClass('MyClass');
  4.  
  5. $j('#MyElement').toggleClass('MyClass');
  6.  

并且:

选择 | 换行 | 行号
  1. <script type="text/javascript">
  2.     function changeClass()
  3.     {
  4.         // code examples from above
  5.     }
  6.  
  7.     $j(':button:contains(My Button)').click(changeClass);
  8. </script>
  9. ...
  10. <button>My Button</button>
  11.  

问候 Omer Aslam

标签: Javascript

添加新评论