嗨,我想绑定两个div的CSS不透明度与该元素的滚动量.
比如说我有两个div:
<div class="red" style="background:red"></div>
<div class="blue" style="background:blue"></div>
当红色div进入视口时,其不透明度从0到100 - 取决于滚动的数量.
同样,当蓝色div进入视口时,其不透明度从100变为0,具体取决于滚动的数量.
我发现这个带滚动的Jquery/Javascript Opacity动画 -
var fadeStart=100 // 100px scroll or less will equiv to 1 opacity
,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity
,fading = $('#fading')
;
$(window).bind('scroll', function(){
var offset = $(document).scrollTop()
,opacity=0
;
if( offset<=fadeStart ){
opacity=1;
}else if( offset<=fadeUntil ){
opacity=1-offset/fadeUntil;
}
fading.css('opacity',opacity).html(opacity);
});
但是滚动量是绑定文档高度,而不是div本身.
这是一个从http://jsfiddle.net/RPmw9/工作的jsfiddle
提前致谢.
如何在多个类选定元素上添加/删除单个类.
在我的设置中,我有一些缓存的变量并不是每个变量:
var classOne = document.querySelector(".class1");
var classTwo = document.querySelector(".class2");
var classThree = document.querySelector(".class3");
var classFour = document.querySelector(".class4");
但我也想尝试这样的事情:
var allClasses = [classOne, classTwo, classThree, classFour];
allClasses.classList.add("active");
allClasses.classList.remove("active");
似乎没有工作.
请不要jQuery.
我正在开发一个表单，允许用户通过单击按钮添加额外的输入字段。
它基本上看起来像这样：
<div>
<input type="text" placeholder="existing"/>
</div>
<button class="add">add</button>
使用一点 JavaScript：
var add = document.querySelector(".add");
var div = document.querySelector("div");
add.addEventListener('click', function () {
div.innerHTML += '<input type="text" placeholder="new"/>';
});
但是，我注意到，当单击按钮时 - 如果任何现有输入字段有值，它们就会被清除。
我已经摆弄了一段时间，似乎找不到解决方案来阻止这种情况发生，所以我想知道这里是否有人可以提供帮助。
这是一个小提琴http://jsfiddle.net/gxzLZ/
这两种引用方法的主要区别是什么？
使用其中一个有什么好处？还有什么样的用例最适合他们？
var selection = document.querySelector('.selector') !== null;
var selection = document.querySelector('.selector');
前者仅用于浏览器遗留支持吗？
我正在研究 CSS 转换，特别是可以转换哪些 CSS 属性以及它们各自的浏览器支持。努力在谷歌上找到任何全面的东西。
我相信并非所有 CSS 属性都是过渡性的。例如，background:is not、butbackground-color:和background-image:are。
这是否意味着 CSS 转换仅适用于长手语法？或者也许这个例子只是一个例外。
有人有可以转换的房产的完整列表吗？
当我查看很多CSS网格系统和框架时,他们通常会使用百分比宽度的标准列和行设置.像这样的东西例如:
标准网格列:
.col-10 {
width: 83.33333%;
width: calc(100% / 12 * 10);
width: -webkit-calc(100% / 12 * 10);
width: -moz-calc(100% / 12 * 10); }
但是,除此之外,我经常会看到其他类似的.push或者.pull.例如这样:
推/拉类:
.push-10 {
left: 83.33333%;
left: calc(100% / 12 * 10);
left: -webkit-calc(100% / 12 * 10);
left: -moz-calc(100% / 12 * 10); }
.pull-10 {
left: -83.33333%;
left: calc(-100% / 12 * 10);
left: -webkit-calc(-100% / 12 * 10);
left: -moz-calc(-100% / 12 * 10); }
我已经开始使用网格系统,但我从来不需要使用这些类.可能是因为我不知道他们做了什么.所以我的问题是:
如何使用JavaScript从路径对象构建嵌套的UL结构？
例如,给定以下路径数组:
var paths = [
"d1/d2/d3/file1.txt",
"d1/d2/d3/file2.txt",
];
我想建立以下UL
<ul class="base-UL">
<li class="folder">d1
<ul>
<li class="folder">d2
<ul>
<li class="folder">d3
<ul>
<li class="file" data-url="d1/d2/d3/file1.text">file1.text</li>
<li class="file" data-url="d1/d2/d3/file2.text">file2.text</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
我应该如何构建一个递归函数来执行此操作？
编辑 我能够成功编写一个执行此操作的函数,但我无法弄清楚如何将完整路径作为文件元素中的数据属性:请参见下文:
function buildFromPathList(paths) {
for (var i = 0, path; path = paths[i]; ++i) {
var pathParts = path.split("/");
var subObj = tree_;
for (var j = 0, folderName; folderName = pathParts[j]; ++j) {
if (!subObj[folderName]) {
subObj[folderName] = j < pathParts.length - 1 …有谁知道如何通过xlink:hrefCSS属性选择XML元素？
请参阅此处了解用法,但不解释如何使用CSS选择它.
<book title="XQuery Kick Start">
<description
xlink:type="simple"
xlink:href="http://book.com/images/XQuery.gif"
xlink:show="new"> ... </description>
</book>
如何在选择器上正确循环从"getElementsByTagName()"返回的对象.我似乎无法做对.
例如,如果我有一堆像这样的div:
<div class="wrapper">
<div class="test1">this is a div</div>
<div class="test2">this is a div</div>
<div class="test1">this is a div</div>
<div class="test2">this is a div</div>
<div class="test1">this is a div</div>
<div class="test2">this is a div</div>
</div>
我想循环遍历"getElementsByTagName()"的结果,如下所示:
var wrapper = document.querySelector(".wrapper");
var divs = wrapper.getElementsByTagName("div");
for (i = 0; i < divs.length; ++i) {
each = divs[i];
if (each.classList.contains("test2")) {
this.style.display = "none";
}
}
这是一个小提琴:http://jsfiddle.net/Y2Yzv/1/
How can I set/retrieve the last selected value of a select drop-down with JavaScript? I'm trying to create an onchange function on a select drop-down that that sets the selected option, and then on each page-load, that valued is loaded.
Here is the HTML
<select class="testSelect">
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test2">test3</option>
<option value="test2">test4</option>
</select>
不过，我在使用 Javascript 时遇到了一些麻烦。
var select = document.querySelector(".testSelect");
var selectOption = select.options[select.selectedIndex];
var getLast = localStorage.getItem(select, lastSelected);
selectOption = getLast;
select.onchange = function () {
var …