如何删除 css 属性 "element{}"

Question

单击此 link： The first prt scr you can see play and mute buttons.

单击此 link： The second prt scr I can't see background image, but still javascript working!

我的背景图片去哪了？如何删除 "element" 属性？

element {
    background: transparent url("../images/unmute.png") repeat scroll 0% 0%;
}

button#mutebtn {
    background: transparent url("../images/unmute.png") repeat scroll 0% 0%;
}

Answer 1

这是通过 JQuery 删除属性的方法：

 element.removeAttribute(attributename)

查看此 link 了解更多信息。

Answer 2

您有 2 个选择：

利用你 css 文件中的 !important:

button#mutebtn { background: transparent url("../images/unmute.png") repeat scroll 0% 0% !important; }

（尽可能避免使用 !important 被认为是最佳做法。）

或者转到您的 html 页面，找到正确的行并删除那里的 css 背景。

注意：您无法在样式表中找到 element。这是 css，即 direct/inline 在您的 html 文件中实施。

我给你做了一个例子，查看thisfiddle！

Answer 3

如果您将内联样式添加到 HTML 中的 #mutebtn，它将在检查器中显示为 element{}。

检查你的HTML，如果你需要像这样使用内联样式：

<button id="mutebtn" style="background...."></button>

注意背景属性的 URL，在 CSS 文件中似乎没问题，但在 HTML 文件中我认为它应该是不同的路径, 通常没有开头的 "../".

换句话说，删除 HTML 中的内联样式，或将那里的路径更改为："images/unmute.png"

Answer 4

var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullscreenbtn;
function intializePlayer(){
 // Set object references
 vid = document.getElementById("my_video");
 playbtn = document.getElementById("playpausebtn");
 seekslider = document.getElementById("seekslider");
 curtimetext = document.getElementById("curtimetext");
 durtimetext = document.getElementById("durtimetext");
 mutebtn = document.getElementById("mutebtn");
 volumeslider = document.getElementById("volumeslider");
 fullscreenbtn = document.getElementById("fullscreenbtn");
 // Add event listeners
 vid.addEventListener("timeupdate",seektimeupdate,false);
 playbtn.addEventListener("click",playPause,false);
 mutebtn.addEventListener("click",vidmute,false);
 fullscreenbtn.addEventListener("click",toggleFullScreen,false);
 seekslider.addEventListener("change",vidSeek,false);
 vid.addEventListener("timeupdate",seektimeupdate,false);
 volumeslider.addEventListener("change",setvolume,false);
 
}
window.onload = intializePlayer;
function playPause(){
 if(vid.paused){
  vid.play();
  playbtn.style.background = "url(../images/pause.png)";
 } else {
  vid.pause();
  playbtn.style.background = "url(../images/play.png)";
 }
}
function vidmute(){
 if(vid.muted){
  vid.muted = false;
  mutebtn.style.background = "url(../images/mute.png)";
 } else {
  vid.muted = true;
  mutebtn.style.background = "url(../images/unmute.png)";
 }
}
function vidSeek(){
 var seekto = vid.duration * (seekslider.value / 100);
 vid.currentTime = seekto;
}
function seektimeupdate(){
 var nt = vid.currentTime * (100 / vid.duration);
 seekslider.value = nt;
 var curmins = Math.floor(vid.currentTime / 60);
 var cursecs = Math.floor(vid.currentTime - curmins * 60);
 var durmins = Math.floor(vid.duration / 60);
 var dursecs = Math.floor(vid.duration - durmins * 60);
 if(cursecs < 10){ cursecs = "0"+cursecs; }
 if(dursecs < 10){ dursecs = "0"+dursecs; }
 if(curmins < 10){ curmins = "0"+curmins; }
 if(durmins < 10){ durmins = "0"+durmins; }
 curtimetext.innerHTML = curmins+":"+cursecs;
 durtimetext.innerHTML = durmins+":"+dursecs;
}
function setvolume(){
 vid.volume = volumeslider.value / 100;
}
function toggleFullScreen(){
 if(vid.requestFullScreen){
  vid.requestFullScreen();
 } else if(vid.webkitRequestFullScreen){
  vid.webkitRequestFullScreen();
 } else if(vid.mozRequestFullScreen){
  vid.mozRequestFullScreen();
 }
}

  playbtn.style.background = "url(../images/pause.png)";

  playbtn.style.background = "url(../images/play.png)";

div#video_player_box {
 width: 100%;
 background: #000;
}
div#video_controls_bar {
 padding: 10px;
 color: #CCC;
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 width: 100%;
}
button#playpausebtn {
 background: url(../images/pause.png);
 
 width: 30px;
 height: 30px;
 display: inline-block;
 border: 0px none;
 cursor: pointer;
 opacity: 0.5;
 
}
button#playpausebtn:hover {
 opacity: 1;
}
input#seekslider {
 display: inline-block;
 width: 100%;
 padding: 2px;
 
}
input#volumeslider {
 display: inline-block;
 width: 80px;
 padding: 2px;
 
}
button#mutebtn {
 background:url(../images/unmute.png);
 
 width: 30px;
 height: 30px;
 border: 0px none;
 cursor: pointer;
 opacity: 0.5;
 
 /*--style text button
 font-weight: bold;
 padding: 0.5em;
 border-radius: 15px;
 border: 1px solid #A7A7A7;
 background-color: #068EA2;
 background-image: -moz-linear-gradient(center bottom, #BABABA 1%, #FFF 20%);--*/
}
button#mutebtn:hover {
 opacity: 1;
}
button#fullscreenbtn {
 background: url(../images/fullscreen.png);
 width: 30px;
 height: 30px;
 border: 0px none;
 cursor: pointer;
 opacity: 0.5;
 float:right;
 
 /*--style text button
 font-weight: bold;
 padding: 0.5em;
 border-radius: 15px;
 border: 1px solid #A7A7A7;
 background-color: #068EA2;
 background-image: -moz-linear-gradient(center bottom, #BABABA 1%, #FFF 20%);--*/
}
button#fullscreenbtn {
 opacity: 1;
}
input[type='range'] {
 -webkit-appearance: none !important;
 background: #000;
 border: #666 1px solid;
 height: 2px;
}
input[type='range']::-webkit-slider-thumb {
 -webkit-appearance: none !important;
 background: #FFF;
 height:10px;
 width:10px;
 border-radius:100%;
 cursor:pointer;
}

<div id="video_player_box">
        <video id="my_video" autoplay>
          <source src="media/echo-hereweare.mp4">
        </video>
        <div id="video_controls_bar">
        <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
        <button id="playpausebtn"></button>
        <button id="mutebtn"></button>
        <input id="volumeslider" type="range" min="0" max="100" value="50" step="1">
<span id="curtimetext"></span> / <span id="durtimetext">
</span><button id="fullscreenbtn">[&nbsp;]</button>   
        </div>
        <!--end video_controls_bar -->
        </div>
        <!--end video_player_box -->

如何删除 css 属性 "element{}"

how to remove css property "element{}"

javascript

css

element

properties

background-image