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

点击此链接：第一个prt scr，您可以看到播放和静音按钮。

点击此链接：第二个 prt scr 我看不到背景图像，但仍然 javascript 有效！

它去了哪里我的背景图像？如何删除"元素"属性？

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

这是通过

JQuery 删除属性的方法：

 element.removeAttribute(attributename)

查看此链接以获取更多信息。

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

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

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

小心背景属性的 URL，从 CSS 文件中看起来很好，但从 HTML 文件中我想它应该是一个不同的路径，通常没有初始"../"。

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

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 -->

您有 2 个选项：

利用 css 文件中
的重要内容：
button#mutebtn { background: transparent url("../images/unmute.png") repeat scroll 0% 0% !important; }

（最佳做法是尽可能避免重要。

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

注意：您无法在样式表中访问element。这是在您的 html 文件中直接/内联实现的 css。

我为你做了一个例子，检查这个小提琴！

相关内容

最新更新

热门标签：