Question

＆＃13;

/*
**
* Change styling based on given parameters
**
**/
function changeStylingOnChange(objects){	
	let element = objects,
		input = element.input,
		changeSelector = element.changeSelector,
		cssProperty = element.cssProperty,
		pixels = element.pixels;
    
		if(cssProperty === 'fontFamily'){
			changeFontFamily(input, changeSelector, cssProperty);
		} else {
			pixels ? 
				document.querySelector(changeSelector).style[cssProperty] = `${input.value}px` : 
				document.querySelector(changeSelector).style[cssProperty] = `${input.value}`;
		}
}

function changeFontFamily(input, changeSelector, cssProperty) {
	var fontFamily = input.value.replace("+", " ");
	var link = document.getElementById('fontLink');

	if(link) {
		link.href = `https://fonts.googleapis.com/css?family=${input.value}`;
	} else {
		var link = document.createElement('link');
		link.id = 'fontLink';
		link.rel = 'stylesheet';
		link.href = `https://fonts.googleapis.com/css?family=${input.value}`;
		document.head.appendChild(link);
	}

	document.querySelector(changeSelector).style[cssProperty] = fontFamily;
}

＆＃13;

<select class="exitIntentFontFamily" name="fontFamily" onchange="changeStylingOnChange({input:this, changeSelector:'.exit-intent-wrapper', cssProperty:'fontFamily', pixels:false})">
                            <option value="ABeeZee">ABeeZee</option>
                            <option value="Abel">Abel</option>
                            <option value="Abhaya+Libre">Abhaya Libre</option>
                            <option value="Abril+Fatface">Abril Fatface</option></select>
                            
<div class="exit-intent-wrapper">
            <span class="close-btn" onclick="closeExitIntent()"></span>
            <div class="exit-intent-content-wrapper">
                <div class="exit-intent-header-wrapper">
                    <h1 class="column exit-intent-header">Test</h1>
                </div>
                <div class="exit-intent-inner" style="font-size: 24px;">
                    <p class="column description">Register now to be the first to get all the updates</p>
                    <div class="exit-intent-body">
                        <div class="column">
                            <form action="" class="form">
                                <div class="inner-form">
                                    <div class="fs_row">
                                        <div class="column">
                                            <input type="text" placeholder="email" class="email-input">
                                        </div>
                                    </div>
                                </div>


                                <div class="fs_row">
                                    <div class="column">
                                        <button class="fs_button"></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

＆＃13;

我为一个元素指定了一个font-family，但是想要将这个字体系列分配为单引号。

这是我将font-family附加为css属性

的javascript片段

var fontFamily = input.value.replace("+", " ");
document.querySelector(changeSelector).style[cssProperty] = fontFamily;

渲染如下：

<div class="exit-intent-wrapper left" style="background: rgb(255, 255, 255); font-family: "Allerta Stencil";">

如何指定此变量fontFamily单个qouted？

Answer 1

我猜你不必使用引号，如果没有引号，它的工作正常，但我还没有测试过具有空格的字体系列。

下面的代码段显示了添加到元素

的动态字体

＆＃13;

open ( my $input, '<', 'filename_here' ) or die $!;
open ( my $output, '>', 'output_filename' ) or die $!;

select $output; #set output source for print location
while ( <$input> ) {
   #apply pattern matches to current line
   s/$search/$replace{$1}/g; 
   #print current line
   print;
}

＆＃13;

document.getElementById('btn').addEventListener('click', function() {
  var font = document.getElementById('font').value;
  document.getElementById('content').style['font-family'] = font;
});

＆＃13;

Answer 2

每当我尝试设置这样的样式时，JS就会逃避双重qoutes并将它们包括在内：

type Thing = 
  | { type: 'a', a: 1 }
  | { type: 'a', a: 2 } 
  | { type: 'b', b: 3 }
  | { type: 'b', b: 4 }
  | { type: 'c', c: 5 }
  | { type: 'c', c: 6 }

const a1 = {type: 'a', a: 2}
const a2: Thing = {type: 'a', a: 1}

function printThingOfTypeA(thingOfTypeA: {type: 'a', a: number}) {
  console.log('type: ' + thingOfTypeA.type)
  console.log('a: ' + thingOfTypeA.a)
}

printThingOfTypeA(a1)
printThingOfTypeA(a2) // Error

＆＃13;

style="font-family: \"Allerta Stencil\";"

＆＃13;

let div = document.querySelector("#test");

div.style.fontFamily = "Allerta Stencil";

console.log(div)

＆＃13;

make fontFamily cssproperty单引号

2 个答案: