javascript - 检测/操纵元素的 CSS

Question

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');
}

如您所见，这有点令人头疼而且没有必要。我确信有更简单的方法，但我似乎无法弄清楚。

非常感谢任何帮助。

Answer 1

我只是将所有字体系列和 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');