可读性是一个javascript程序,它以更易读的方式转换html页面.我正在寻找一个Ruby实现,或类似的东西,任何人都知道具有这种特性的库？
我会正确的:
我需要做的是按下按钮隐藏一个特定的div,它应该是一个切换,所以基本上:按一次隐藏,再按一次显示,再按一次隐藏等...
我希望隐藏/显示规则在CSS中完成,并且在纯javascript中进行交互(请不要jquery).这是我需要做的,但我不太确定如何执行javascript代码.
HTML:
<p class="button">Show/hide<p>
<div> I want to hide this by pressing the button above</div>
CSS:
#showhide {
display: none;
}
.button {
display: block;
height: 30px;
width: 100px;
background: green;
text-align: center;
padding-top: 10px;
padding-left: 0px;
font: 15px arial bold;
border: 1px solid black;
text-decoration: none;
list-style:none;
margin: 10px 0px 10px 0px;
}
此外,如果你认为这个问题不属于这里或者是愚蠢的,请尽量避免粗鲁,我只是想在这里学习.
首先，这个问题有很多重复，但这些答案并没有提供更深入的见解。
一季度。为什么这会导致 200,0 ？
考虑这个片段：
var el = document.querySelector('#r');
console.log('First:: ' + el.offsetHeight);
el.style = {
height: el.offsetHeight + 500 + 'px'
}
console.log('Second:: ' + el.offsetHeight);<div id="r" style="height:200px;width:800px;overflow:auto;border:1px solid;margin:20px;box-sizing:border-box"></div>我怀疑el.style是只读的，所以我希望设置一个对象应该默默地失败，因此我希望输出是
First:: 200,Second:: 200
但它是：
First:: 200,Second:: 0
为什么 ？
Q2。为什么使用 Object.assign 设置 el.style 有效？
Object.assign(el.style,{
height : el.offsetHeight + 500
})
有人可以用更深入的见解解释我吗？
如果我有一个使用的加载错误的javascript函数
document.getElementById("ID").innerHTML = "This is your error";
而且我希望将它设置为风格化,然后将文本更改为不同的颜色,并将错误置于不同的位置,我将如何进行此操作？我一直在环顾四周,找不到任何信息.
我是Javascript的新手,我遇到了一个烦人的问题.
我有一个包含列表的列表.我有一个脚本,可以在单击时将列表设置为可见/不可见.但是,一旦按下它,我就不会切换/添加一个类到链接.
我的列表看起来像这样
<ul>
<li><a href="#" onclick="toggle('item1');">Click something</a>
<ul id="item1" style="display: none;">
<li>Something ...</li>
<li>Something something</li>
</ul></li>
<li><a href="#" onclick="toggle('item2');">Click something else</a>
<ul id="item2" style="display: none;">
<li>Something more...</li>
<li>Something something less?</li>
</ul></li>
</ul>
我的脚本看起来像这样:
<script type="text/javascript">
function toggle(id) {
var v = document.getElementById(id);
if (v.style.display == '') {
v.style.display = 'none';
v.removeClass("selected");
} else {
v.style.display = '';
v.addClass("selected");
}
}
</script>
列表显示和隐藏它应该,但不添加或删除类.
CSS是这样的:
a:link {
color: #000000;
text-decoration: none;
}
a:hover, a.selected {
color: #005b97;
text-decoration: none;
padding-left: 2px; …在尝试div使用Javascript 进行基本折叠时,我遇到了以下奇怪的错误; 使用此代码:
<html>
<head>
<style type="text/css">
.hidden
{
display: none;
}
</style>
<script type="text/javascript">
function toggle()
{
var element = document.getElementById('hidden1');
if(element.style.display === 'none')
{
element.style.display = 'inline';
}
else
{
element.style.display = 'none';
}
}
</script>
</head>
<body>
<a onclick="toggle()">Click me</a><br />
<div id="hidden1" class="hidden">
stuffs
</div>
</body>
</html>
我原本期望它能够正常工作:它会div开始隐藏,每次点击它都会从可见变为不可见,但它不会:它需要2次点击才能第一次显示元素,经过一些调试我意识到这div似乎是在一些奇怪的量子通量.将以下警报添加到toggle()方法顶部时:
alert('\'' + document.getElementById('hidden1').style.display + '\'');
我给了'',这意味着它是空的.但是,当我在完全相同的地方这样做时:
console.log(document.getElementById('hidden1').style);
然后控制台显示:
[object CSS2Properties]
具有以下属性:
0: "display"
...
display: "none"
但是,当CSS声明.hidden …
我很难根据select标签中的选定项目更改元素类.这是我的代码:
<table>
<tr>
<select onchange="wow(this.value)">
<option value="a">a</option>
<option value="b">b</option>
</select>
</tr>
<tr id="x" class="show">
x
</tr>
</table>
<script>
function wow(value){
switch(value){
case "a": document.getElementById("x").className = "show"; break;
case "b": document.getElementById("x").className = "hide"; break;
}
}
</script>
<style>
.show{
display:inline-block;
}
.hide{
display:none;
}
</style>
我在这里没有看到任何问题.我也试过setAttribute("class", "show")但不行.
我编写了一个内联脚本,以便在浏览器无法加载SVG并将其替换为PNG图像时自动处理.这部分工作得很好,但我也想改变图像onhover,这个答案对我很有用,除了我不需要它"运行和查找"如果浏览器可以处理SVG并且不使用PNG.所以,当我将一类noSVG(此处称为"myclass")添加到IMG标签时,我想我会触发它.
现在这里是问题的开始,我可以使用CSS来修改添加的类的样式.但我不能使用jQuery来修改它.更奇怪的是,当我为你们添加它给JSFiddle时,它确实有效.在你们认为我使用的是jQuery的糟糕版本之前,我测试了多个版本(包括由JSFiddle使用的1.10.1).
HTML:
<img src="1.svg" onerror="this.onerror=null; this.src='1.png'; this.className+=' myclass';" class="image" id="1" />
jQuery的:
$(function() {
$(".myclass")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "hover.png";
$(this).attr("src", src);
//console.log("moused over");
})
.mouseout(function() {
var src = $(this).attr("src").replace("hover.png", ".png");
$(this).attr("src", src);
//console.log("moused out");
});
});
我想禁用自动应用于div的类.
<div class="A B">
我想禁用Class'A'而不是'B'.我怎么能这样做？
我用html5,CSS,bootstrap创建了一个好看的网站.我想知道是否可以在白天(蓝色)和夜晚(暗红色)中自动更改代码中的背景颜色和导航栏选择颜色.我可以做些什么来根据用户的时间更改导航栏和背景的颜色？这是我的代码:
<body>
<nav>
<h1 style="font-family:Helvetica;">
<ul class="nav">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
</ul>
</li>
<li><a class="dropdown" href="#">Menu 2</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
</ul>
</li>
<li><font size="+4", color="white">IBAE</font> <br></li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu Item 3</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul>
<li><a href="#">Sub-menu Item 1</a></li>
<li><a href="#">Sub-menu Item 2</a></li>
<li><a href="#">Sub-menu …css ×9
javascript ×9
html ×6
jquery ×2
addclass ×1
bootstrap-4 ×1
class ×1
dom ×1
hide ×1
html-select ×1
jsp ×1
onchange ×1
readability ×1
removeclass ×1
ruby ×1
show ×1
styles ×1
toggle ×1