Tag Archives: css

JavaScript / JS native dynamic introduction of external CSS files and dynamic insertion of CSS code fragments

there are two ways to dynamically create CSS styles:
1. Introduce external CSS files
2. Insert CSS snippet
how to insert CSS external files dynamically:

function loadStyle(url){
var link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = url;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(link);
}
loadStyle('test.css');

dynamically loads CSS snippet

function loadCssCode(code){
    var style = document.createElement('style');
    style.type = 'text/css';
    style.rel = 'stylesheet';
    //for Chrome Firefox Opera Safari
    style.appendChild(document.createTextNode(code));
    //for IE
    //style.styleSheet.cssText = code;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(style);
}
loadCssCode('body{background-color:#f00}');

IE & lt; link> The tag is considered a special tag and its children cannot be accessed, so stylesheet.csstext is used, and errors thrown by IE are caught using a try catch statement, with the following compatible code:

function loadCssCode(code){
var style = document.createElement('style');
    style.type = 'text/css';
    style.rel = 'stylesheet';
    try{
        //for Chrome Firefox Opera Safari
        style .appendChild(document.createTextNode(code));
    }catch(ex){
        //for IE
        style.styleSheet.cssText = code;
    }
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(style);
}
loadCssCode('body{background-color:#f00}');

adds styles to the page in real time, so you can react instantly on the page.

CSS: several ways to center the box vertically and horizontally

method 1: width and height known.

idea:
relative positioning of the parent element
absolute positioning of the child element
left: 50%; top: 50%;
margin-left: negative half width.
margin-top: minus half of the height;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>居中</title>
    <style type="text/css">
        #box{
            width: 400px;
            height: 200px;
            position: relative;
            background: red;
        }
        #box1{
            width: 200px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -50px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="box1">

        </div>
    </div>
</body>
</html>

method 2: width and height themselves unknown

means that the subbox itself still has a width and a height that it doesn’t know.
relative positioning of parent box
absolute positioning of child box
top, right, bottom, left all 0
margin: auto;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>居中</title>
    <style type="text/css">
        #box{
            width: 800px;
            height: 400px;
            position: relative;
            background: red;
        }
        #box1{
            width: 100px;
            height: 50px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            background: green;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="box1">

        </div>
    </div>
    <script type="text/javascript">

    </script>
</body>
</html>

method 3: flex layout

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>垂直居中</title>
    <style type="text/css">
        .box{
            width: 400px;
            height: 200px;
            background: #f99;
        }
        .box1{
            width: 200px;
            height: 100px;
            background: green;
        }
        .center{
            display: flex;
            justify-content: center;//实现水平居中
            align-items: center;//实现垂直居中
        }
    </style>
</head>
<body>
    <div class="box center">
        <div class="box1">

        </div>
    </div>
</body>
</html>

Method 4: translation positioning +transform

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3让一个盒子居中</title>
    <style type="text/css">
        .parent_box{
            width: 400px;
            height: 200px;
            background: red;
            position: relative;
        }
        .child_box{
            width: 200px;
            height: 100px;
            background: #9ff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate( -50%,-50%);
        }
    </style>
</head>
<body>
    <div class="parent_box">
        <div class="child_box">

        </div>
    </div>
</body>
</html>

method 5: table-cell layout

parent display: table-cell; vertical-align: middle; Sub-level margin: 0 auto;

** horizontal center

plus a horizontal center: margin-left: 50%; transform: translateX(-50%);

Error: Module did not self-register

1, error description

[编译scss/sass] 14:56:38.373 internal/modules/cjs/loader.js:717
[编译scss/sass] 14:56:38.373   return process.dlopen(module, path.toNamespacedPath(filename));
[编译scss/sass] 14:56:38.373                  ^
[编译scss/sass] 14:56:38.373 Error: Module did not self-register.
[编译scss/sass] 14:56:38.373     at Object.Module._extensions..node (internal/modules/cjs/loader.js:717:18)
[编译scss/sass] 14:56:38.373     at Module.load (internal/modules/cjs/loader.js:598:32)
[编译scss/sass] 14:56:38.373     at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
[编译scss/sass] 14:56:38.373     at Function.Module._load (internal/modules/cjs/loader.js:529:3)
[编译scss/sass] 14:56:38.373     at Module.require (internal/modules/cjs/loader.js:636:17)
[编译scss/sass] 14:56:38.373     at require (internal/modules/cjs/helpers.js:20:18)
[编译scss/sass] 14:56:38.373     at module.exports (G:\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\lib\binding.js:19:10)
[编译scss/sass] 14:56:38.373     at Object.<anonymous> (G:\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\lib\index.js:14:35)
[编译scss/sass] 14:56:38.373     at Module._compile (internal/modules/cjs/loader.js:688:30)
[编译scss/sass] 14:56:38.373     at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)

2. Error

error indicates that the module has not been registered and installed with NPM Install, but the result still gives an error, indicating that the module has not been successfully installed

G:\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor\win32
-x64-64>npm install

> [email protected] install G:\HBuilderX\plugins\compile-node-sass\node_modu
les\node-sass-china
> node scripts/install.js

node-sass build Binary found at G:\HBuilderX\plugins\compile-node-sass\node_modu
les\node-sass-china\vendor\win32-x64-64\binding.node

> [email protected] postinstall G:\HBuilderX\plugins\compile-node-sass\node_
modules\node-sass-china
> node scripts/build.js

Binary found at G:\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-ch
ina\vendor\win32-x64-64\binding.node
Testing binary
Binary has a problem: Error: \\?\G:\HBuilderX\plugins\compile-node-sass\node_mod
ules\node-sass-china\vendor\win32-x64-64\binding.node is not a valid Win32 appli
cation.
\\?\G:\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor\w
in32-x64-64\binding.node
    at Object.Module._extensions..node (internal/modules/cjs/loader.js:717:18)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at module.exports (G:\HBuilderX\plugins\compile-node-sass\node_modules\node-
sass-china\lib\binding.js:19:10)
    at Object.<anonymous> (G:\HBuilderX\plugins\compile-node-sass\node_modules\n
ode-sass-china\lib\index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
Building the binary locally
Building: F:\nodejs\node.exe G:\HBuilderX\plugins\compile-node-sass\node_modules
\node-sass-china\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsa
ss_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [ 'F:\\nodejs\\node.exe',
gyp verb cli   'G:\\HBuilderX\\plugins\\compile-node-sass\\node_modules\\node-sa
ss-china\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library=' ]
gyp info using [email protected]
gyp info using [email protected] | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (G:\HBuilderX\plugins\compile-no
de-sass\node_modules\node-sass-china\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (G:\HBuilderX\plugins\compile-node-sass\node_mo
dules\node-sass-china\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (G:\HBuilderX\plugins\compile-node-sass\node_mo
dules\node-sass-china\node_modules\which\which.js:80:29)
gyp verb `which` failed     at G:\HBuilderX\plugins\compile-node-sass\node_modul
es\node-sass-china\node_modules\which\which.js:89:16
gyp verb `which` failed     at G:\HBuilderX\plugins\compile-node-sass\node_modul
es\node-sass-china\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at G:\HBuilderX\plugins\compile-node-sass\node_modul
es\node-sass-china\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:154:21)
gyp verb `which` failed  python2 { Error: not found: python2
gyp verb `which` failed     at getNotFoundError (G:\HBuilderX\plugins\compile-no
de-sass\node_modules\node-sass-china\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (G:\HBuilderX\plugins\compile-node-sass\node_mo
dules\node-sass-china\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (G:\HBuilderX\plugins\compile-node-sass\node_mo
dules\node-sass-china\node_modules\which\which.js:80:29)
gyp verb `which` failed     at G:\HBuilderX\plugins\compile-node-sass\node_modul
es\node-sass-china\node_modules\which\which.js:89:16
gyp verb `which` failed     at G:\HBuilderX\plugins\compile-node-sass\node_modul
es\node-sass-china\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at G:\HBuilderX\plugins\compile-node-sass\node_modul
es\node-sass-china\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:154:21)
gyp verb `which` failed   stack:
gyp verb `which` failed    'Error: not found: python2\n    at getNotFoundError (
G:\\HBuilderX\\plugins\\compile-node-sass\\node_modules\\node-sass-china\\node_m
odules\\which\\which.js:13:12)\n    at F (G:\\HBuilderX\\plugins\\compile-node-s
ass\\node_modules\\node-sass-china\\node_modules\\which\\which.js:68:19)\n    at
 E (G:\\HBuilderX\\plugins\\compile-node-sass\\node_modules\\node-sass-china\\no
de_modules\\which\\which.js:80:29)\n    at G:\\HBuilderX\\plugins\\compile-node-
sass\\node_modules\\node-sass-china\\node_modules\\which\\which.js:89:16\n    at
 G:\\HBuilderX\\plugins\\compile-node-sass\\node_modules\\node-sass-china\\node_
modules\\isexe\\index.js:42:5\n    at G:\\HBuilderX\\plugins\\compile-node-sass\
\node_modules\\node-sass-china\\node_modules\\isexe\\windows.js:36:5\n    at FSR
eqWrap.oncomplete (fs.js:154:21)',
gyp verb `which` failed   code: 'ENOENT' }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` succeeded python E:\Python\Python36\python.EXE
gyp ERR! configure error
gyp ERR! stack Error: Command failed: E:\Python\Python36\python.EXE -c import sy
s; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack   File "<string>", line 1
gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack                                ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack
gyp ERR! stack     at ChildProcess.exithandler (child_process.js:289:12)
gyp ERR! stack     at ChildProcess.emit (events.js:182:13)
gyp ERR! stack     at maybeClose (internal/child_process.js:962:16)
gyp ERR! stack     at Socket.stream.socket.on (internal/child_process.js:381:11)

gyp ERR! stack     at Socket.emit (events.js:182:13)
gyp ERR! stack     at Pipe._handle.close (net.js:606:12)
gyp ERR! System Windows_NT 6.1.7601
gyp ERR! command "F:\\nodejs\\node.exe" "G:\\HBuilderX\\plugins\\compile-node-sa
ss\\node_modules\\node-sass-china\\node_modules\\node-gyp\\bin\\node-gyp.js" "re
build" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--
libsass_library="
gyp ERR! cwd G:\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china

gyp ERR! node -v v10.13.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     F:\nodejs\node_cache\_logs\2019-01-10T07_40_54_700Z-debug.log

G:\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor\win32
-x64-64>

3. Solution

reinstall

after uninstalling Sass related modules

C:\Users\Administrator.USER-0GUONPPBHK>npm uninstall node-sass -D
npm WARN Administrator.USER-0GUONPPBHK No repository field.
npm WARN Administrator.USER-0GUONPPBHK No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fse
vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)

added 33 packages from 16 contributors, removed 22 packages and updated 340 pack
ages in 26.067s

C:\Users\Administrator.USER-0GUONPPBHK>npm install node-sass -D

> [email protected] install C:\Users\Administrator.USER-0GUONPPBHK\node_modules\n
ode-sass
> node scripts/install.js

Cached binary found at F:\nodejs\node_cache\node-sass\4.11.0\win32-x64-64_bindin
g.node

> [email protected] postinstall C:\Users\Administrator.USER-0GUONPPBHK\node_modul
es\node-sass
> node scripts/build.js

Binary found at C:\Users\Administrator.USER-0GUONPPBHK\node_modules\node-sass\ve
ndor\win32-x64-64\binding.node
Testing binary
Binary is fine
npm WARN [email protected] requires a peer of vue@^2.5.2 but none is installed. Y
ou must install peer dependencies yourself.
npm WARN [email protected] requires a peer of vue@^2.5.0 but none is installed.
 You must install peer dependencies yourself.
npm WARN Administrator.USER-0GUONPPBHK No repository field.
npm WARN Administrator.USER-0GUONPPBHK No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fse
vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)

+ [email protected]
added 110 packages from 118 contributors in 26.774s

C:\Users\Administrator.USER-0GUONPPBHK>