CSS — 30

使用 CSS 过渡和 JavaScript 创建一个可移动的 3D 盒子

我一直在玩CSS，试图创建一个可以用原生JavaScript选择面的3D立方体。

这只是更改 box div 的 className，并使用 transition 属性在位置之间平滑过渡。

这里有一个 JSFiddle 来展示一个可运行的示例 http://jsfiddle.net/synthet1c/VdDmA/1/

目前看起来很酷，但它的行为并不像我想的那样……有人知道我怎样才能在盒子进行过渡时保持它的坚固吗？目前如果面从360度转到90度，该面将以错误的方向旋转270度。我理解为什么会这样，但找不到解决方法。

我添加了所有的浏

阅读更多 →

javascript - 如何在 Magento 中向自定义小部件添加 CSS 文件？

所以，我有一个用于 Magento 的自定义小部件（比如产品幻灯片）。

并且想为我的小部件添加自定义 CSS/Javascript。

我不想每次都显示（加载）CSS/JS 文件。

我只想在页面包含自定义小部件时加载 JS/CSS。

谢谢。

答案＃1

这取决于您是将小部件添加为小部件实例（CMS -> 小部件），还是将其包含在页面、静态块或电子

阅读更多 →

javascript - 版本控制：如何在不同环境之间控制 css 和 js 的压缩/最小化版本

我正在使用 git（通过 GitHub）对我的项目进行版本控制。我对此还很陌生，但我想了解如何在不同环境之间保持我的 css 和 js 文件同步的最佳做法。

示例：假设我在 dev 上写了一个 js 脚本。我对我的工作很满意，然后我推送到测试环境。在测试环境上，我希望得到一个压缩/最小化的版本。如何在不增加大量额外任务的情况下实现这一点呢？你们通常是怎么做的？我猜这是某种部署脚本的一部分，它会压缩代码并推送到我指定的环境。

这引出了另一个问题：我的项目中的header（和/或footer）文件怎么办？如果我的dev有：

而我的 testin

阅读更多 →

javascript - 是否可以设置 cssRule 的 cssText 属性

我正在尝试编辑 cssRule 的 cssText 属性。我经常看到这样做：

为什么在 cssText 中更改高度会移除 background: none？
在启动时重新定位我的图片

通常使用：cssText.replace( ... ) 来完成。

似乎除了我以外每个人都能使用。有人能解释一下为什么以下内容不起作用吗：

var cssText = document.styleSheets[1].cssRules[0].cssText; document.styleSheets[1].

阅读更多 →

javascript - 使用 css 集成 style 标签

我试着使用 jQuery 将 <style type="text/css"></style> 添加到 head。我尝试了这样做

$("<style type='text/css'></style>").appendTo("head");

以前，我有这种类型的

阅读更多 →

javascript - 使用 CSS 或 jQuery 搜索并高亮文本背景

我有一个包含一些文本的div：

我还有一个文本框，用户将在其中输入搜索字符串。

有没有一种 CSS 方法可以为搜索字段中输入的特定关键字匹配的文本字符串设置 background-color 属性？

我目前所做的是使用JavaScript进行查找和替换。我已经准备好使用jQuery来做这个。

阅读更多 →

html - 如何阻止60秒计时器出现“跳动”现象（css/javascript）

我在 JavaScript 中创建了一个“60秒”倒计时器，我正在尝试弄明白如何让它不“跳动”。主要问题是字体字符的宽度不一致。我唯一想到的方法是把每个字符放入它自己的 div 中，并通过 CSS 控制该 div 的宽度。但我不太确定该怎么做。有没有更好的方法？

我知道Greensock的“TweenMax”插件可以处理这个，但我想自己创建这个，而不是为了一个小功能使用库。

jsFiddle：** http://jsfiddle.net/oneeezy/3CreM/1/

HTML：

<div class="row"> <span class="timer timerback">00:00</span> <span id="Timer" class="timer timerfront">60:00</span> <span class="seconds">Seconds</s

阅读更多 →

使用 Javascript 和 CSS 的 ReactJs 模态框

如何在 body 结束标签后附加 ReactJS 模态窗口，以将模态定位设置为相对于 body 标签绝对定位。

这里是添加在另一个组件中的示例。

<div className="modal"> <p>Model Pop-up <button onClick={this.handleClick}>here</button></p> <div id="js-modal-inner" className="modal"> <div className="modal__content js-dialog"> &l

阅读更多 →

javascript - 如何使用 jquery 从类获取 css 属性

我如何从 test 类获取 'color' 属性，但不应该使用 .addClass 和 .css 函数。

.test { color: red; margin: 10px 10px 10px 10px; }

我需要为其他类添加颜色属性，类似如下

我如何仅从 test 类中获取 color 属性以使用 getproperty 类。

更新：

阅读更多 →

javascript - 理解在 CSS border-box 激活时的 offsetWidth 和 clientWidth

我来自这个问题：分别理解 offsetWidth、clientWidth、scrollWidth 和 -Height

我明白这是标准盒模型的情况，对吗？

但是当你有像这样的东西时会发生什么:

*{ box-sizing: border-box; }

现在 offsetWidth 和 clientWidth 相等吗？这个规则总是会这样吗？

那 padding-box 呢？

答案＃1

自己尝试一下：http://codepen.io/anon/pen/WvojWw

默认情况下，它设置为 box-sizing: border-box，但只需在样式中更改它即可得到不同的结果。

当你点击按钮时，它会为你计算 offsetWidth 和 clientWidth。

偏移宽度

阅读更多 →