- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
fiddle - http://jsbin.com/UsamELI/1/edit
我正在研究一个实验性的 WYSIWYG 网页设计器,遇到了一个问题。
最初我是单独执行此操作的,但是当我回头查看代码时,我认为我可以通过一种更简单、更容易阅读的方式缩小它的范围,同时仍然执行它的任务。
我有一个 div .setmy-typography
,里面有一组 anchor ,带有标题和文本来说明字体系列的名称。
当我点击 Canvas /编辑器时,我可以在文本框中抓取一个 div 的类名,然后使用文本框作为类的容器开始动态地操作它,以便轻松操作。
我可以使用 $('.name').val($(this).css('font-family')); 检测字体并将其毫无问题地显示在文本框中
我的问题是在检测之后。如果我检测到 arial、sans 或 impact 作为字体。我希望 backgroundColor 在所有 anchor 上都发生变化,但是正在使用的字体像 arial 例如我正在尝试检测 attr('title') 或 text() 同时还更改它的 backgrounColor 以显示它是事件字体并且是当前选择。
这是我停下来的地方
// Detect Font Family
if ($('.setmy-typography').find('a').text() === $(this).css('font-family')) {
$('.setmy-typography a').css('backgroundColor', '#666');
$(this).css('backgroundColor', '#1c1c1c');
}
这是 anchor 上的点击事件,通过 anchor 的 .text() 更改所选元素的字体大小
// Set selected elements font family
$('.grabmy-typography a').click(function() {
$("." + $('.findclassname').val()).css({
'font-family': $(this).text()
});
$('.grabmy-typography a').css('backgroundColor', '#444');
$(this).css('backgroundColor', '#1c1c1c');
$('.grab-font-family').val($(this).text());
});
我正在尝试创建这种类型的效果,但是在您单击 Canvas 中的元素后检测到字体系列时。
对于关闭,我知道我可以单独完成(因为这是我在进一步处理之前开始做的)
这是单独完成字体样式检测时的样子
// Detect Font Family
if ($(this).css('font-family') === 'serif') {
$('.setmy-typography a').css('backgroundColor', '#444');
$('.grab-serif').css('backgroundColor', '#1c1c1c');
}
if ($(this).css('font-family') === 'sans') {
$('.setmy-typography a').css('backgroundColor', '#444');
$('.grab-sans').css('backgroundColor', '#1c1c1c');
}
if ($(this).css('font-family') === 'arial') {
$('.setmy-typography a').css('backgroundColor', '#444');
$('.grab-arial').css('backgroundColor', '#1c1c1c');
}
if ($(this).css('font-family') === 'arial black') {
$('.setmy-typography a').css('backgroundColor', '#444');
$('.grab-arial-black').css('backgroundColor', '#1c1c1c');
}
if ($(this).css('font-family') === 'courier') {
$('.setmy-typography a').css('backgroundColor', '#444');
$('.grab-courier').css('backgroundColor', '#1c1c1c');
}
if ($(this).css('font-family') === 'comic sans ms') {
$('.setmy-typography a').css('backgroundColor', '#444');
$('.grab-comic-sans-ms').css('backgroundColor', '#1c1c1c');
}
if ($(this).css('font-family') === 'helvetica') {
$('.setmy-typography a').css('backgroundColor', '#444');
$('.grab-helvetica').css('backgroundColor', '#1c1c1c');
}
if ($(this).css('font-family') === 'impact') {
$('.setmy-typography a').css('backgroundColor', '#444');
$('.grab-impact').css('backgroundColor', '#1c1c1c');
}
if ($(this).css('font-family') === 'lucida sans') {
$('.setmy-typography a').css('backgroundColor', '#444');
$('.grab-lucida-sans').css('backgroundColor', '#1c1c1c');
}
if ($(this).css('font-family') === 'tahoma') {
$('.setmy-typography a').css('backgroundColor', '#444');
$('.grab-tahoma').css('backgroundColor', '#1c1c1c');
}
if ($(this).css('font-family') === 'times') {
$('.setmy-typography a').css('backgroundColor', '#444');
$('.grab-times-new-roman').css('backgroundColor', '#1c1c1c');
}
if ($(this).css('font-family') === 'times new roman') {
$('.setmy-typography a').css('backgroundColor', '#444');
$('.grab-times-new-roman').css('backgroundColor', '#1c1c1c');
}
if ($(this).css('font-family') === 'verdana') {
$('.setmy-typography a').css('backgroundColor', '#444');
$('.grab-verdana').css('backgroundColor', '#1c1c1c');
}
如您所见,这有点令人头疼而且没有必要。我确信有更简单的方法,但我似乎无法弄清楚。
非常感谢任何帮助。
最佳答案
我只是将所有字体系列和 CSS 属性放在一个数组/对象中并对其进行循环:
var fontFamilyCSS = {
'serif': {
'.setmy-typography a': {
'backgroundColor': '#444'
},
'.grab-serif': {
'backgroundColor': '#1c1c1c'
}
},
'sans': {
'.setmy-typography a': {
'backgroundColor': '#444'
},
'.grab-sans': {
'backgroundColor': '#1c1c1c'
}
}
// And so on
};
然后:
var css = fontFamilyCSS[$(this).css('font-family')] || false;
if (css) {
for (var selector in css) {
$(selector).css(css[selector]);
}
}
类似的东西。 (未经测试)
编辑:实际上,由于字体系列之间的唯一区别是您正在设置 .grab-FONT-FAMILY-NAME
,您可能会这样做:
var fontFamily = $(this).css('font-family').toLowerCase().replace(/ /g, '-');
$('.setmy-typography a').css('backgroundColor', '#444');
$('.grab-' + fontFamily).css('backgruondColor', '#1c1c1c');
关于javascript - 检测/操纵元素的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21237079/
我是puppeteer的新手(通常对javascript不太了解),并且正在尝试编写一些基本功能来: 从XPath获取所有链接 循环浏览并单击那些链接 屏幕截图并保存页面的HTML 返回屏幕快照,然后
您好,我正在尝试创建一个我想通过网络发送到服务器的数据包,我几乎已经对数据包进行了排序,但是它缺少一个长度标识符,我需要在我的方法结束时计算它并添加放入数据包。 数据包结构是这样的 前导值标识符 (U
我正在尝试更改按钮的样式(实际上只是一个 div)。我可以在 CSS 中使用 .classname:active 来实现,但是按钮只会在被点击时改变样式;单击释放后,它不会保持样式更改。所以,我决定使
我有一个下拉导航栏(fiddle here 和下面的代码片段)。单击 SubItem 时,JS 函数会进行 Ajax 调用(未显示)。我想要实现的是在单击 SubItem 时隐藏 SubItems 列
给定一组平面图(Autocad、svg 或任何需要的格式...),我想以编程方式生成从 A 点到 B 点的方向。基本上我想说:“我如何获得从101房间到143房间?” (或三倍奖励积分,从 101 房
我在 Win32 下的 MS dev studio 中将一些代码从 C 转换为 C++。在旧代码中,我使用 QueryPerformanceCounter() 进行了一些高速计时,并对获得的 __in
我正在寻找一种方法来从 QTableWidget 单元格中挤出所有可能的空间。我粘贴了一些代码来演示我在下面尝试过的事情,并且我上传了在 OSX 10.8.5、Qt 4.8.4、PySide 1.2.
对于 PhoneGap 移动应用程序,我有以下场景: 应用程序打开并显示index.html 用户登录并被重定向到 home.html 然后用户可以转到 news.html 我想以一种方式处理 hom
可能是一个简单的问题: 尝试使用plotly生成散点图并自定义图例。 这是我的数据: require(plotly) set.seed(1) my.df % add_annotations(text=
在 Instagram/Facebook 上的帖子下方,您会看到类似“第 1 个人、第 2 个人和其他 10 个人喜欢此帖子”的文字。我想知道如何使用 Django 来实现网站的相同效果?通常,我会使
我必须使用 Form.Action 重定向到将从我的页面获取值的脚本。值得注意的是,这个脚本是外部的。 我的问题是,我还想要被点击并连接了 Action 的按钮,以便首先在后面的代码中完成一些功能。
我有一个问题。 我可以在 Express 中操纵路线吗?当我发出 get 或 post 申请地址时,我可以将 2 条路线传递到同一个 get 或 post 申请吗?像这样的东西。 module.exp
如果我在不同的 Canvas 上绘制我的图像,我可以使用 js 库应用一些效果,如淡入淡出、移动和其他效果吗?如果可能的话,在速度和性能方面可能会很有趣,而不是操纵“原始”?非常感谢 最佳答案 if
我希望你能帮助我。如何转换这个扁平的 JavaScript 数组,来自: [ {"state":"First State","district":"First District","local_
我有一个 React JSX 元素,我想遍历它的子元素,对其中的每个字符串元素执行替换(或任何其他操作),然后返回新的、修改后的 JSX 元素。例如: var element = Text { var
我正在制作一个 Java 网络项目,我想在其中使用一些 javascript 操作一些前端 SVG 元素。 我正在绘制一个相当简单的车库图,其中有一个来自 JSP 页面的棚屋元素。 我想要一个 jav
我读过许多帖子,其中人们询问有关对 XML 元素强制执行某些属性顺序的问题,一般的回答是这不合法/必需/不允许/相关/其他。 我不是在寻找任何说我不应该关心属性顺序的回复,所以如果这是你的观点,请不要
大家好,我的问题是,如何将两个 C 风格的字符串 append 到一个字符串中? 我对 C++ 的处理方式 (std::string) 很感兴趣,我从未接触过 C 风格的字符串,需要为我当前的开发项目
我选择了 HTML 页面上的所有节点,如下所示: var all = $('*'); 然后我遍历每个节点,检查每个节点是否有关联的文本值: var newDom = all.map((i, node)
示例取自 Mozilla's help page re = /(\w+)\s(\w+)/; str = "John Smith"; newstr = str.replace(re, "$
我是一名优秀的程序员,十分优秀!